react: Onchange event for 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

About this issue

• Original URL
• State: closed
• Created 9 years ago
• Comments: 21 (6 by maintainers)

Most upvoted comments

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

+23

burabure on Jul 21, 2015

_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>	
}

+6

nanda248 on Jun 8, 2017

Using delegated event fixes the problem for me.

HTML

`

<div class="input-field col s10" id="pickerContainer"> <select> <option value="" disabled selected>Choose your option</option> </select> </div> `

JS

$('#pickerContainer').on('change', 'select', function(){ console.log("got you"); });

+5

quannt on Mar 22, 2016

@yanickrochon That’s literally what the “make your own wrapper” advice means when it’s applied 😉

+4

bloodyowl on Aug 13, 2016

@zpao many projects use React with Materialize. This is not an isolated case. And I’m not even sure, yet, how Materialize lists all the OPTIONS as they aren’t there when I inspect my DOM… Closing this issue on the basis that “make your own wrapper” in these circumstances is almost insulting.

+4

yanickrochon on Aug 13, 2016

this isnt a react answer but materializecss ensures that when the form is submitted, the correct value is sent in the select element so if for instance you have a form (or any container) with id subject_update and the select name is type you can capture the change event with jquery as follows: $(‘#subject_update select[name=type]’).on(‘change’,function(){console.log(‘select has changed to:’,$(this).val());});

+2

davidleverage on Jun 16, 2015

I think the guilty’s here https://github.com/Dogfalo/materialize/blob/master/sass/components/_form.scss#L654

materialize creates a fake select with a <ul> as you can see in their demo

+2

bloodyowl on Apr 14, 2015

@quannt Man, thanks God I met you here. Thank you for leaving your solution, works great for me. Thanks!

+1

mcmxc on Sep 14, 2016

@syranide Well, then, luckily some people do not agree with you, and created react-materialize which seems to solve many issues that “React [can’t] fix”.

+1

yanickrochon on Aug 13, 2016

Read more comments on GitHub

← react: onChange doesn't work on IE for type=range

react: onClick and onChange doesn't fire on radio buttons on iOS →