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

[richardsabow]

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: Dogfalo/materialize#1160

[syranide]

If you have a repro it would be great.

Is "materialize" perhaps modifying the DOM? It kind of sounds like it, that's a big no-no, you may update styles and props of React managed nodes without errors, but if they're cloned/replaced/moved then it's an invariant error waiting to happen.

[bloodyowl]

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

[Charca]

There's a lot of DOM mutation happening when you use a materialize custom component, and I guess you'll face similar problems with most of those components. Maybe Material-UI is more suitable for your requirements: http://callemall.github.io/material-ui/

[richardsabow]

Thank you guys! :)
@bloodyowl You're right, i"ve forgotten that this could be the issue.
@Charca Yes i know about material-ui, i tried it, but materialize felt to be more mature and it has more features. And i hadn't any real issue with it until now. :)

[zpao]

Not an actual React bug so closing out. The fact that materialize is modifying the DOM means you're probably going to have a tricky time of things and you'll probably want to build some wrapper components to make things work better. Good luck!

[richardsabow]

Yes, but actually your answers helped me, so thanks! :)

[davidleverage]

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());});

[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

[waganse]

@davidleverage You made my day! Form with id="subject_update" put me on the right track.

[quannt]

Using delegated event fixes the problem for me.

HTML

`

Choose your option

`

JS

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

[erudinsky]

Guys, quick question. When I have dynamic children and need to bind onChangeHandler to each generated "select" component. How can I do this? Seems my ref is not unique and it just binds it to the last in my loop..

[saiponethaaung]

Hi @erudinsky I think we can simply use
$("select.dynamicclass").on("change")
handler( by using select element as a prefix ). I just fix my problem in this way.

[yanickrochon]

The element value is always empty for me. The options are generated dynamically, and they do appear in the list, however the node is empty when I inspect it and whatever method I use, the value is not set (i.e. this.refs.selectElement.value, $(this.refs.selectElement).val(), this.refs.selectElement.selectedIndex, etc.)