Search code examples
reactjsmaterial-uievent-bubbling

Material ui select onchange is not bubbling

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.

Solution

  • 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.