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.