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

Created on 14 Apr 2015 · 8Comments · Source: Dogfalo/materialize

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>

Source

richardsabow

Most helpful comment

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}>
    ...
   )
}

kriscarle on 14 Aug 2015

👍5

All 8 comments

Also created an issue on the react repo: https://github.com/facebook/react/issues/3667

richardsabow on 14 Apr 2015

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

navee7 on 14 Jul 2015

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

richardsabow on 14 Jul 2015

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

navee7 on 15 Jul 2015

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}>
    ...
   )
}

kriscarle on 14 Aug 2015

👍5

This is probably caused by the fact that selects often ignore user input, as described in this bug report I filed:
https://github.com/Dogfalo/materialize/issues/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.

SimHacker on 20 Jan 2017

👍1

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