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

[richardsabow]

I use materialize 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>

[richardsabow]

Also created an issue on the react repo: facebook/react#3667

[navee7]

Hi, Have you solved this? If so please share details...

[richardsabow]

Hi, I just used the 'native' select form element with class browser-default.

[navee7]

ok fine... I was able to do that with browser-default.

[kriscarle]

Based on comments in the other thread, I worked around this with the code below:

handleSelectChange(event) {
     setState({value: event.target.value});
   },

componentDidMount() {
     $(React.findDOMNode(this.refs.mySelectBox)).on('change',this.handleSelectChange);
   },

render() {
   return (
    ...
      <select ref="mySelectBox" value={this.state.value}>
    ...
   )
}

[SimHacker]

This is probably caused by the fact that selects often ignore user input, as described in this bug report I filed:
#4098

Please re-open that issue, and mark this as a duplicate. I described and fixed an input event tracking problem that causes select menus to ignore the item you select, if you don't click on it very quickly, or if you press down and drag.

To demonstrate this, try popping up the menu by clicking (because pressing and dragging does not work, and starts a text selection gesture, which is another bug), then point at an item different than the currently selected item, then click very quickly. If you click quickly enough, it works. Then try clicking on another item than the one you just selected, but more slowly so you're holding the button or finger down for about half a second to a second. (Not a press-and-hold gesture, which is slower, but just a slow click, which is very common for people to do.) Notice that the menu pops down at the instant you press down on the button or touch the screen, but the onclick handler that reports the selected item is never called. That is the bug I reported and fixed, but it was closed unfortunately because the developers don't see it as a bug. But it certainly is.

[Dogfalo]

As materialize was not made to work specifically with React, I can not be sure of the exact problem here. You can try this library however, it may help in this scenario: https://github.com/react-materialize/react-materialize. Probably a duplicate of #2843

[ChildishGiant]

onchange doesn't seem to work with just materialize either when it comes to selects