Material UI inputs do not trigger onChange event in form

[etomanon]

I need to trigger an action when a value in form changes.
However, when I add onChange event to form element (<form onChange={onChange} >) then it is not triggered for these MUI inputs: Select, Slider, Autocomplete.
Any idea how to propagate the onChange event to the form component?
I noticed that for Autocomplete, the onChange is called when you write in the text field but not when you select an item.
Does react-hook-form have any other mechanism to call a function when a value in the form changes?
I cannot use watch() because it is not called ONLY when a value change.

https://codesandbox.io/s/react-hook-form-controller-forked-dcle5?file=/src/index.js

[bluebill1049]

that's not an issue with rhf rather MUI doesn't suppose onChane at the form. u can attach onChane on those components tho.

[etomanon]

Do you mean to attach onChange from Controller render props?
When I do that then the onChange event is not triggered in form.

<Controller
        name={id}
        control={control as any}
        render={(props) => (
          <Autocomplete
            id={props.name}
            onChange={(_, data) => {
              props.onChange(data) // HERE it is attached
              onChange?.()
            }}
            onBlur={props.onBlur}
            options={options}
            value={props.value}
            getOptionLabel={(option) => option.label ?? ''}
            getOptionSelected={(option, value) => option.value === value.value}
            renderInput={(params) => (
              <>
                <TextField
                  {...params}
                />
              </>
            )}
/>

[bluebill1049]

yes, you can do at the onChange prop

[zz-james]

it would be nice not to have to pass a callback so they work like regular form elements should do and bubble the change event up to the parent form element/component, it seems to work with TextField and Checkbox but not say with the input element of the DatePicker.

[zz-james]

I managed to make the DatePicker propogate it's change event by using something very similar to this solution
https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-change-or-input-event-in-react-js
you can attach a ref to the datePicker using the inputRef prop

[eduardodallmann]

I have same problem. A normal text field triggers onChange of rhf, but a select field doesn't trigger onChange

https://codesandbox.io/s/selecttextfields-material-demo-forked-m52cw?file=/demo.tsx

[eduardodallmann]

@bluebill1049 @etomanon I didn't find solution by overwriting onChange. Any idea?

[tetchel]

Old question, but for SEO posterity, this can also be caused by having no default value (ie default value is undefined). Try setting your default value for the field with this problem to null or ''.