issue: Clicks in react-select are not triggering onChange event

[remborg]

Version Number

7.76.0

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/wispy-field-j8s7xv

Steps to reproduce

Editing the text input triggers onChange events as expected (see output in the console).
Choosing a tag in the second field by clicking on it doesn't trigger onChange. However when you start typing the tag name it does trigger it.

Expected behaviour

Choosing a tag should trigger the onChange event.

What browsers are you seeing the problem on?

Chrome, Firefox

Relevant log output

Code of Conduct

• I agree to follow this project's Code of Conduct

[BrendanC23]

This is an issue with how the onChange callback is configured (which is implicit in your {...field} code).

When spreading the field props, it will include onChange={field.onChange}. The RHF Controller onChange callback expects a string. However, react-select is passing the full option, which is { value: string; label: string }. You need to manually wire up the onChange and make sure that only the option value is being passed back to RHF. You also need to make sure that the value prop being passed to react-select is correct. It is expecting the full option object.

See this CSB

<Controller
    name="tags"
    control={control}
    render={({ field }) => (
        <Select
            {...field}
            value={tags.find((o) => o.value === field.value) ?? null}
            onChange={(result) => {
                console.log(result);
                field.onChange(result.value);
            }}
            options={tags}
        />
    )}
/>

[remborg]

Thanks for your message, unfortunately it's still not working.
Selecting a tag by clicking on it triggers the Select onChange function, but the form onChange isn't triggered.

[BrendanC23]

Did you look at my sandbox? What behavior are you seeing? If the select's onChange handler is running, you should be able to wire it up to the field.onChange and pass the value to the form.

[remborg]

Yes, I've looked at your sandbox and if I type something in the text input, I can see an "onChange :>> ..." message in the console, printed by the form 'onChange' callback.
If I click on the Select input then click on a tag, I can see a message in the console with the 'result' object, but it's not triggering the form 'onChange' callback.

[BrendanC23]

Got it. I misunderstood your initial request. I was looking at correctly setting up the Controller for the field.onChange callback for the select, not the form-level onchange attribute.

I'm not too familiar with react-select, but looking at the rendered HTML, it renders several <input> elements instead of a <select>. That's probably the source of the problem, not something with RHF.

Depending on your use case, you could look at the RHF watch callback or subscribe callback.

[remborg]

I will take a look at you links, thanks.
But shouldn't calling field.onChange trigger the form.onChange?

[BrendanC23]

The HTML change event is triggered from input event bubbling. Even without RHF, it probably wouldn't be triggered by react-select. It's possible that RHF could add support for it, though with watch and subscribe, I'm not sure how receptive maintainers would be to adding another option.

[MILLERMARRU]

The last question here is the actual key to this one: no, calling field.onChange does not trigger a native <form onChange> handler, and it's worth being precise about why, since the two things are named the same but aren't related.

Looking at useController's source directly, field.onChange builds a plain object shaped like an event ({ target: { value, name }, type: EVENTS.CHANGE }) and passes it straight into React Hook Form's own internal handler as a normal function call. There's no dispatchEvent, no real Event object involved anywhere in that path, it's an internal convention RHF uses so the same handler can accept either a real change event from a native input or a manually constructed one from something like Controller. It looks like an event, but the browser never sees it as one.

A native <form onChange> only fires in response to genuine DOM change events bubbling up from actual form-associated elements (<input>, <select>, <textarea>). Typing in react-select's search box works because that really is a native <input> under the hood, dispatching real input/change events that bubble normally. Clicking an option in the dropdown list doesn't, because those options are plain <div>s with click handlers, not form elements, so there's no native change event generated at all for that interaction, calling field.onChange(result.value) correctly updates the RHF-managed value regardless, that part of the wiring in the earlier suggestion is right, it's specifically the form-level onChange DOM listener that has nothing to hook into here.

If the actual goal is reacting to value changes at the form level rather than intercepting a native DOM event, RHF's own watch or the useWatch/subscribe APIs are the tool for that, since they observe RHF's internal state directly rather than depending on a DOM event that a component like react-select was never going to emit.