RadioGroup with non direct Radio children problem

[Ronin11]

I have a RadioGroup thats using the Grid component for formatting, and its throwing the following error:

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Using Grid to format RadioGroup Radio Buttons shouldn't break functionality.

Current Behavior

Using Grid to format RadioGroup Radio Buttons breaks the Radio Group functionality, you can click on the radio buttons, but you can't unclick them, and the don't allow a single option in the group as they do when functioning properly.

Steps to Reproduce (for bugs)

https://codesandbox.io/s/o597y4vo16

Context

I'm trying to build a component where I can dynamically arrange the RadioGroup using the Grid.

Your Environment

Hopefully these are sufficient:
"material-ui": "^1.0.0-beta.33",
"material-ui-icons": "^1.0.0-beta.17",
"react": "^16.2.0",
"react-animations": "^1.0.0",
"react-dev-utils": "^5.0.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.9",
"react-test-renderer": "^16.2.0",
"redux": "^3.7.2",
"redux-form": "^7.2.3",
"redux-mock-store": "^1.5.1",

[oliviertassinari]

@Ronin11 I'm closing as a duplicate of #2225. You need to forward the properties down from the RadioButton to the Button (through the Grid components).

[Ronin11]

@oliviertassinari Ive been trying to do that with {...props} and its still not working. I noticed you mentioned about more documentation in the original issue. If you give me an example I can try to write some up to help you out.

[oliviertassinari]

Basically, you can't use the RadioGroup component as the root Grid is preventing it from exporing the radios. Instead, you can do the plumbing manually: applying the onChange and checked property on each radio.

https://codesandbox.io/s/3r1wl9l1k6

import React from "react";
import PropTypes from "prop-types";
import Radio from "material-ui/Radio";
import { FormGroup, FormControlLabel } from "material-ui/Form";
import { Component } from "react";
import Grid from "material-ui/Grid";

export class RenderRadioGroup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: this.props.input,
      buttons: this.props.buttons,
      onChangeHandler: this.props.onChangeHandler,
      props: this.props,
      selected: { option1: true }
    };
  }

  render() {
    const change = value => {
      let temp = {};
      temp[value] = true;
      this.setState({
        selected: temp
      });
    };

    return (
      <FormGroup role="radiogroup" {...this.state.props} {...this.state.input}>
        <Grid container direction="row" alignContent="space-around">
          {this.state.buttons.map((button, key) => (
            <Grid key={key} item xs={6} md={6} lg={6}>
              <FormControlLabel
                {...this.state.props}
                id={button.value}
                checked={this.state.props.value === button.value}
                value={button.value}
                onChange={event => {
                  change(button.value);
                }}
                control={
                  <Radio
                    color="primary"
                    checked={this.state.selected[button.value]}
                  />
                }
                label={button.name}
              />
            </Grid>
          ))}
        </Grid>
      </FormGroup>
    );
  }
}

RenderRadioGroup.propTypes = {
  input: PropTypes.object.isRequired,
  buttons: PropTypes.array.isRequired,
  onChangeHandler: PropTypes.func
};

export default RenderRadioGroup;