Onchange event for <select> is not propagated in materialize css when not used with class "browser-default"

I use materialize css framework with react and had an issue on <select>s onChange event propagation. This way the event is not fired, this.handleSelectChange is not called.

<select value="B" onChange={this.handleSelectChange}>
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
</select>

When i add the class browser-default to select it works pretty well.

<select className="browser-default" value="B" onChange={this.handleSelectChange}>
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
</select>

Not sure if it’s a react issue, but maybe. I also created an issue on materialize repo: https://github.com/Dogfalo/materialize/issues/1160

[burabure]

here’s a clean way to do it:

  componentDidMount() {
    // Use Materialize custom select input
    $(this.refs.yourSelectTag).material_select(this._handleSelectChange.bind(this));
  }

if you’re using react < 0.14.0 you’ll have to use getDOMNode() on this.refs.yourSelectTag

[nanda248]

_I’ve been playing around with Materialize(^0.98.2) select feature with Meteor React. Below is the way how i fixed the issue. Meteor 1.4.4.3 _

import ReactDOM from 'react-dom'; 
...
componentDidMount(){
	  $(document).ready(function() {
	    $('select').material_select();
	  });		  
	  $(ReactDOM.findDOMNode(this.refs.testSelect)).on('change',this.handleSelectChange.bind(this));
}
``
handleSelectChange(event) {
	event.preventDefault();
	var test = event.target.value;
     	       this.setState({value: test});
}

render(){
...
<div className="input-field col s12">
<select ref="testSelect">
   <option value="" disabled selected>Choose your option</option>
   <option value="123">Option 1</option>
   <option value="223">Option 2</option>
   <option value="332">Option 3</option>
</select>
    <label>Materialize Select</label>
 </div>	
}