-
-
Notifications
You must be signed in to change notification settings - Fork 31.8k
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
[RadioButtonGroup] breaks when nesting non-RadioButton components #2225
Comments
This comment has been minimized.
This comment has been minimized.
Olivier, I need to nest the buttons in a div with clearfix for the layout that I want. If you look at the internal implementation of RadioButtonGroup it Iterates through and adds props to RadioButtons - I don't see a reason for it to nuke your layout structure or for the component to break if you have a nonRadioButton element nested inside. Thoughts? |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Hey, any progress on this? I ended up with the same bug, using |
PR here #3627 |
I'm having troubles also for this. because I need render a radios and text fields together. any progress? |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
The solution @bshyong wrote works great. You will need to update line 112 to read |
If possible, someone can reopen and merge this fix to resolve this issue: #3627 |
@bshyong #3627 (comment). However, focus has moved to |
Makes sense. I would stick with the recursive approach for now, as I would like to avoid the use of context unless it is absolutely necessary. https://facebook.github.io/react/docs/context.html#why-not-to-use-context We can revisit if this is still a problem once |
I'm very familiar with that page, but I think this use-case sits outside that warning. From a brief look at the code, it does seem |
Hi guys |
I'm also interested to see this feature shipped. |
I am also interested to see this |
Same here... |
I need this to display additional content below the selected radio button. |
In order to keep the implementation simple and slim, I'm closing the issue with the following solution. <RadioGroup
aria-label="gender"
name="gender2"
className={classes.group}
value={this.state.value}
onChange={this.handleChange}
>
<Radio value="male" />
<Radio value="female" />
<Radio value="other" />
<Radio value="disabled" disabled />
</RadioGroup> Still, one might want to change the way the radios are rendered. We have the <RadioGroup
aria-label="gender"
name="gender2"
className={classes.group}
value={this.state.value}
onChange={this.handleChange}
>
<FormControlLabel value="male" control={<Radio />} label="Male" />
<FormControlLabel value="female" control={<Radio />} label="Female" />
<FormControlLabel value="other" control={<Radio />} label="Other" />
<FormControlLabel value="disabled" disabled control={<Radio />} label="Disabled" />
</RadioGroup> So, either you can get along with the |
I'm reopening as #10576 makes me believe we should be documenting this behavior and add an example of how to forward the properties. |
Workaround n°1.The RadioGroup component is using the React cloneElement API: #12921. This is a problem because it's hidden from our users, it's happening behind the scene. The immediate children of the RadioGroup should handle the injected properties. If they don't, the control is lost. const Wire = ({ children, ...props }) => children(props);
// …
<RadioGroup
aria-label="Gender"
name="gender1"
className={classes.group}
value={this.state.value}
onChange={this.handleChange}
>
<Wire value="female">
{props => (
<Tooltip title="text">
<FormControlLabel
control={<Radio />}
label="Female"
{...props}
/>
</Tooltip>
)}
</Wire> https://codesandbox.io/s/zr7x1xx32x Workaround n°2.Form libraries like react-final-from can handle the state centralization problem, you can choose not to delegate this task to the RadioGroup. By handling each Radio independently, you can workaround the problem. |
Thanks Oliver the |
I'm trying to do some simple styling. The following example fails.
I have written a patch that resolves this; let me know if I should issue a pull request.
The text was updated successfully, but these errors were encountered: