Dispatch custom event to RHF's onChange from register

[hmaesta]

I have a custom component that works as expected when wrapped into Controller. Still, I want to make things a bit less verbose and use this component with register, just like I do with text inputs.

Current	Desired
<‎Controller control={control} name="sport" render={({ field: { value, onChange } }) => ( <‎MyComponent value={value} onChange={(newValue: string) => onChange(newValue)} /> )} />	<‎MyComponent ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ {...register('sport')} /> ㅤ ㅤ ㅤ ㅤ ㅤ ㅤ ㅤ

Internally, MyComponent has no real inputs, so dispatching a real onChange event is not trivial.

I learned that register expects onChange to be ChangeHandler, so I made my component return an object following ChangeHandler's format, which didn't work.

Next, after watching how native inputs behave with register, I tried dispatching new Event and new CustomEvent, but no success either. With this approach, I always get Cannot read properties of null (reading 'name').

const event = new CustomEvent('change', { bubbles: true, cancelable: true, detail: { value });
onChange(event)

Is there a way to dispatch a manually-created event on onChange that works with React Hook Form?

→ Codesandbox exploration (updated with working solution)

[tinganho]

Succeded in "tricking it" to accept an object value.

onChange({ target: { name, value: myObject } as any); // important to include "name"

Their onChange handler, which we forced to branching into getEventValue:

Which is defined as:

We forced it to evaluate event.target.value

[hmaesta]

It works! 🎉 Thank you!

Updated Codesandbox (line 77)

[tinganho]

I noticed that defaultValues where note propogated. I just created a class(ValueContainer) with getter and setter and called ref(new ValueContainer()) to set the new values.

class ValueContainer<T> {
     private _value: T;
     constructor(public name: string, public onDefaultValue: (value: T) => void) // important that name is defined.
     set value(value: T) {
           this.onDefaultValue(value);
           this._value = value;
     }
}

And then in my component:

function MyComponent({ name, onChange, onBlur}, ref): JSX.Element {
     let defaultValue: any;
     ref(new ValueContainer(name, (v) => defaultValue = v));
}