OnChange not getting fired on radio button click

[shivgarg5676]

I am using following code in my component, but handleChange event is not getting fired as i try to select one of the radio buttons.
I have tried to update my react and react-dom version from 16.0.0 to 16.0.2.

/* eslint-disable flowtype/require-valid-file-annotation */

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Radio, { RadioGroup } from 'material-ui/Radio';
import { FormLabel, FormControl, FormControlLabel, FormHelperText } from 'material-ui/Form';

const styles = theme => ({
  root: {
    display: 'flex',
  },
  formControl: {
    margin: theme.spacing.unit * 3,
  },
  group: {
    margin: `${theme.spacing.unit}px 0`,
  },
});

class RadioButtonsGroup extends React.Component {
  state = {
    value: '',
  };

  handleChange = (event, value) => {
    debugger;
    this.setState({ value });
  };

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <FormControl component="fieldset" required className={classes.formControl}>
          <FormLabel component="legend">Gender</FormLabel>
          <RadioGroup
            aria-label="gender"
            name="gender1"
            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>
        </FormControl>
        
      </div>
    );
  }
}

RadioButtonsGroup.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(RadioButtonsGroup);

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

Expected Behavior

handleChange function should execute when a user tries to click on one of the radio buttons.

Current Behavior

Nothing happens if a user tries to select a radio button and no input is shown to user

Context

Your Environment

Tech	Version
Material-UI	1.0.0-beta.21
React	16.2.0
browser	Chrome-62.0.3202.94
etc

[mbrookes]

@shivgarg5676 You can see this working in the docs site where it looks like your example originated, so the issue isn't with Material-UI. Please use gitter or SO for how-to questions and issues with your own code.

[shivgarg5676]

this is the same code as given in docs and it is not working. So either docs has to be updated. or it might be a compatibility issue with higher react versions.

[mbrookes]

It's working with React 16.1.1. The example you see running in the docs is running the code you see in the docs.

[mefjuu]

@shivgarg5676 have you managed with the issue? I've noticed the same problem here...

[shivgarg5676]

I have not been able to manage/resolve this issue. @mbrookes stated that it is working in 16.1.1 but it is not. Don't know what the issue is. I have tried version beta-21 and beta-23 both. For the workaround i am using onClick handler on parent div rather than onChange handler on radio component.
Sorry for late reply

[sfowl73]

I had the same issue. I ended up having to use an onClick: (event) => {handle.my.stuff(event.target.value)}. It seems to work as expected now. I seem to remember onChange also being very finicky with mui 0.x and having to use onClick instead.

[MartinGao]

I had this issue as well. After debugging my code line by line, it turned out that my issue was not related to material-ui.

I accidentally imported a global CSS file that affected all elements which I believed causing some conflicts with material-ui.

After removing this CSS file, everything worked as expected.

[cmoutafidis]

@MartinGao That was also the case for me, I didn't expect that CSS would affect the radio button functionality... Thanks for that!