<p dir="auto">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.<br>
I have tried to update my react and react-dom version from 16.0.0 to 16.0.2.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/* 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 =&gt; ({
  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) =&gt; {
    debugger;
    this.setState({ value });
  };

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

    return (
      &lt;div className={classes.root}&gt;
        &lt;FormControl component=&quot;fieldset&quot; required className={classes.formControl}&gt;
          &lt;FormLabel component=&quot;legend&quot;&gt;Gender&lt;/FormLabel&gt;
          &lt;RadioGroup
            aria-label=&quot;gender&quot;
            name=&quot;gender1&quot;
            className={classes.group}
            value={this.state.value}
            onChange={this.handleChange}
          &gt;
            &lt;FormControlLabel value=&quot;male&quot; control={&lt;Radio /&gt;} label=&quot;male&quot; /&gt;
            &lt;FormControlLabel value=&quot;female&quot; control={&lt;Radio /&gt;} label=&quot;female&quot; /&gt;
            &lt;FormControlLabel value=&quot;other&quot; control={&lt;Radio /&gt;} label=&quot;other&quot; /&gt;
            &lt;FormControlLabel value=&quot;disabled&quot; disabled control={&lt;Radio /&gt;} label=&quot;Disabled&quot; /&gt;
          &lt;/RadioGroup&gt;
        &lt;/FormControl&gt;
        
      &lt;/div&gt;
    );
  }
}

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

export default withStyles(styles)(RadioButtonsGroup);"><pre class="notranslate"><code class="notranslate">/* 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 =&gt; ({
  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) =&gt; {
    debugger;
    this.setState({ value });
  };

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

    return (
      &lt;div className={classes.root}&gt;
        &lt;FormControl component="fieldset" required className={classes.formControl}&gt;
          &lt;FormLabel component="legend"&gt;Gender&lt;/FormLabel&gt;
          &lt;RadioGroup
            aria-label="gender"
            name="gender1"
            className={classes.group}
            value={this.state.value}
            onChange={this.handleChange}
          &gt;
            &lt;FormControlLabel value="male" control={&lt;Radio /&gt;} label="male" /&gt;
            &lt;FormControlLabel value="female" control={&lt;Radio /&gt;} label="female" /&gt;
            &lt;FormControlLabel value="other" control={&lt;Radio /&gt;} label="other" /&gt;
            &lt;FormControlLabel value="disabled" disabled control={&lt;Radio /&gt;} label="Disabled" /&gt;
          &lt;/RadioGroup&gt;
        &lt;/FormControl&gt;
        
      &lt;/div&gt;
    );
  }
}

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

export default withStyles(styles)(RadioButtonsGroup);
</code></pre></div>


<ul dir="auto">
<li>[x ] I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">handleChange function should execute when a user tries to click on one of the radio buttons.</p>

<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Nothing happens if a user tries to select a radio button and no input is shown to user</p>

<h2 dir="auto">Context</h2>
    
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.21</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome-62.0.3202.94</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">Issue : in mobile where there is possible to scroll (in search result) the keyboard not disappear when the user scroll (there isn't blur on the input) and therefore it give bed user experience.</p>

<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">On mobile devices if it's possible to scroll on search result, when the user scroll the keyboard should disappear.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The keyboard not disappear</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>enter with mobile devices</li>
<li>scroll on menu result</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">The bug cause bed experience when using autocomplete component on mobile devices</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>v1-beta (all)</td>
</tr>
<tr>
<td>React</td>
<td>15.5.4</td>
</tr>
<tr>
<td>browser</td>
<td>all</td>
</tr>
</tbody>
</table>