Material-ui: [RadioButtonGroup] with boolean value

[stunaz]

Problem description

Hi, this code below does not work as expected

<RadioButtonGroup name="shipSpeed" valueSelected={false}>
    <RadioButton
        value={true}
        label="Simple"
    />
    <RadioButton
        value={false}
        label="Must be selected"
    />
</RadioButtonGroup>

The second RadioButton is not selected after being rendered,

Versions

• Material-UI: latest
• React: latest
• Browser: tested with chrome

[dobryanskyy]

I'm experiencing the same issue

[tim-mc]

Just ran into the same problem. It's because of the following in the constructor for RadioButtonGroup:

  componentWillMount() {
    let cnt = 0;

    React.Children.forEach(this.props.children, (option) => {
      if (this.hasCheckAttribute(option)) cnt++;
    }, this);

    this.setState({
      numberCheckedRadioButtons: cnt,
      selected: this.props.valueSelected || this.props.defaultSelected || '',
    });
  }

The conditional just checks for a truthy value in this.props.valueSelected. Of course, if this is false, and there is no defaultSelected prop defined, it falls back to '' (empty string). Setting as true works, and so does setting to false after the initial render, since that's done this way:

  updateRadioButtons(newSelection) {
    if (this.state.numberCheckedRadioButtons === 0) {
      this.setState({selected: newSelection});
    } else {
      warning(false, `Cannot select a different radio button while another radio button
        has the 'checked' property set to true.`);
    }
  }

I want to use this as a controlled input, so I don't want to rely on defaultSelected.

If it were to check for whether the value was defined rather than whether it's truthy, it would work as intended (since the proptype is listed as any).

[lucasbento]

Nice finding, @tim-mc, can you send a PR fixing it?

[tim-mc]

@lucasbento definitely, was planning on doing that today or tomorrow. Stay tuned.

[daiky00]

@tim-mc did you solved this?

[tim-mc]

@daiky00 The PR referenced above fixed the issue (at the time). Haven't used this library in a while, so can't speak for the current state of affairs.