Material ui select onchange is not bubbling

Question

I have a div which has a material ui Select, material ui TextField and a plain html select. This div has an onchange event which simply console logs the event.target.value. When ever the onchange of material ui TextField or the select is triggered, event.target.value is logged to the console. But not for the onchange of material ui select.

sample code: https://codesandbox.io/s/material-demo-03495?file=/demo.tsx

What am i missing here?

Thanks.

Answer 1

The event that triggers the change does bubble, but it is not a "change" event. The onChange function that you provide gets called in response to a click event on the MenuItem. And even that "click" event could either be a click event or a key down event (e.g. if you use arrow keys and then Enter to select an item).

Here's a modification of your sandbox with some additional console logging: https://codesandbox.io/s/material-demo-u5b51?file=/demo.tsx.

Answer 2

You can use native attribute. You will get UI as Material but functionality as native select and thus bubbles too.

      <Select
        native
        value={muiSelectValue}
        onChange={handleMuiSelectOnChange}
        autoWidth
      >
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="three">Three</option>
      </Select>

Answer 3

You are not missing anything. If you add console.log(event) in your handle change functions, you will get to know that events of native elements are syntheticEvents where event you'll get in MUI's handle change will be a class as object. Hence whenever you change the value it will not get reflected to your actual div.