3
votes

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.

3

3 Answers

0
votes

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.

0
votes

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>
0
votes

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.