ancestor's stopPropagation() prevents controlled <select> from working

[jkr2255]

Do you want to request a feature or report a bug? bug

What is the current behavior?

When React component is mounted as a descendent of DOM element which stops propagation of change event, onChange event of <select> in React component does not occur.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

HTML structure

<!-- outer div's onchange event contains stopPropagation() -->
<div>
  <div id="react-root"></div>
</div>

React Component (only render())

render() {
  return(
    <select onChange={this.doesNotWork} value={this.state.value}>
      <option value=""></option>
      <option value="another">another option</option>
    </select>
  );
}

Reproduction in CodePen

What is the expected behavior?

<select onChange> works well just like <input> or <textarea>

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

This issue occurred with React 16.4.2 (not tested for older React), newest Chrome, Firefox, Edge, IE11 on Windows 10.

[gaearon]

React binds events at the document level. You're experiencing this for selects specifically because React actually uses the change browser event for selects. For inputs and textarea, it currently uses the input event. So you can see the same exact issue with inputs if you "block" the input event.

I think we can close this as a duplicate of #2043 (which would solve this).

[gaearon]

We're fixing this in React 17.

[gaearon]

If you want to try it, we released 17 RC yesterday with this change:
https://reactjs.org/blog/2020/08/10/react-v17-rc.html