Radio does not show checked state when wrapped in a tooltip

[henkvhest]

I tried wrapping a RadioButton with a tooltip because having labels in my app will probably not fit in the UI spacewise. The tooltip appears but the button itself does not show to be appear to be selected when I click on it

• [x ] This is not a v0.x issue.
• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I expect the radio button to be checked when I click on it

Current Behavior

The radiobuttons stays unchecked.

Steps to Reproduce

See the codesandbox below, the uppermost radiobuttons don't show a selected styling and are provided with a tooltip
https://codesandbox.io/s/714715lvvx

[eps1lon]

That's most likely a limitation of our current implementation. We already have a discussion in #12921 that addresses this.

[henkvhest]

As in mentioned in #12921, it seems to be related to the RadioGroup. I was able to get tooltips working with separate radiobuttons for now though

[oliviertassinari]

@henkvhest You can workaround the problem with this pattern:

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

Now, @eps1lon is right it's a core issue with #12921. But directly linked to a radio group limitation. I'm closing as a duplicate of #2225.