Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CheckboxGroupInput Options property not overwriting materials ui checkbox props. #2883

Closed
vtretyv opened this issue Feb 14, 2019 · 1 comment · Fixed by #3292
Closed

CheckboxGroupInput Options property not overwriting materials ui checkbox props. #2883

vtretyv opened this issue Feb 14, 2019 · 1 comment · Fixed by #3292

Comments

@vtretyv
Copy link

vtretyv commented Feb 14, 2019

What you were expecting:

I would expect the CheckboxGroupInput to apply my "labelPosition" or "onCheck" that I pass to it in the "options" prop.
What happened instead:
I am attempting to use react-admin's input component: CheckboxGroupInput (https://marmelab.com/react-admin/Inputs.html#checkboxgroupinput). I wanted to overwrite the "labelPosition" to be left instead of right, however when I attempted to set this property it did not change the label position. I also wanted to overwrite the onCheck callback with my own custom callback, but ran into the same issue.
I was able to set the "checked" or "disabled" property to true in the options object, but it did not apply "labelPosition" or "onCheck" that I gave it.

Attempt to modify the "labelPosition" or "onCheck" in the CheckboxGroupInput.
Steps to reproduce:

Attempt to pass your own "labelPosition" or "onCheck" in the CheckboxGroupInput options prop.
Related code:

const NameField = ({ record }) => <div><div>{record.name}</div>
</div>;
class PartnersCreate extends React.Component {
    render(){
        return(
            <Create {...this.props}>
                <SimpleForm redirect="list">
                    <TextInput label="Partner Name" source="name" />
                    <ReferenceInput
                        source="catalogs"
                        reference="catalogs"
                        label="Catalog"
                    >
                        <SelectInput optionText="title" label="Catalog" />
                    </ReferenceInput>
                    <BooleanInput source="checkout" label="Checkout" />
                    <FormDataConsumer>
                    {({ formData, ...rest }) => formData.checkout &&
                    <div>
                        <CheckboxGroupInput
                            source="checked" 
                            label="Products" 
                            choices={products} 
                            optionText={<NameField />} 
                            optionValue="name" 
                            options={{labelPosition:'left'}}

                        /> 
                    
                        <DiscountPercentageInput />
                        <div>
                            <TextInput source="discountMessage" label="Discount Message" />
                        </div>
                        <div>
                            <NumberInput source="commission" label="Commission Percentage" />
                        </div>
                    </div>
                    }
                    </FormDataConsumer>

                </SimpleForm>
            </Create>
        )
    }
}
export default PartnersCreate;

Other information:

I recently added the checkout check in , and the behavior was the same for CheckboxGroupInput outside of this recently added change.
Environment

  • React-admin version: 2.0.0
  • Last version that did not exhibit the issue (if applicable):
  • React version: 16.3.1
  • Browser: Latest Chrome
  • Stack trace (in case of a JS error):
@sagarbakhtar
Copy link
Contributor

I think the issue here is not with the code, but with documentation.
Example code in docs of options props shows and links to the latest documentation of Material UI’s <Checkbox> component, instead, it should link to the version (1.5.1) used by react-admin.

Please correct me if am wrong.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants