[BUG]

[hexcowboy]

The react-hook-form example is no longer valid as the types of onChange differ.

onChange in the input component uses (newValue: string) => void

input-otp/packages/input-otp/src/input.tsx

Lines 45 to 51 in d4aced9

	const onChange = React.useCallback(
	(newValue: string) => {
	uncheckedOnChange?.(newValue)
	setInternalValue(newValue)
	},
	[uncheckedOnChange],
	)

onChange form react-hook-form expects (event: Event) => void

Version of the library: 1.4.2

Expected Behavior

Either the example needs to be updated to only show use with <Controller> or onChange should conform to react-hook-forms definition.

[guilhermerodz]

Thanks for reporting.

You said:

Either the example needs to be updated to only show use with or onChange should conform to react-hook-forms definition.

I'm still unsure what's the best way to go about this.

I wanna go in the right direction while not breaking apps worldwide...

[hexcowboy]

I think that would mean updating the example usage with <Controller />, as changing the onChange API would be a breaking change.

[navalex]

Hey, I just discovered this issue on my app too. I would suggest to maybe propose an alternative component dedicated to react-hook-form with a matching API ? I don't know if it will cost really much to do that, but it would always be lighter and clearer for users than using the <Controller /> option which is a bit more verbose

[guilhermerodz]

we need to update input-otp's docs to provide an example for the older react-hook-form (how it's looking in the docs right now), plus the newer most recent version of react-hook-form.

can anyone make a PR?

if not, I'll do it when I make time

[yuzhakovvv]

In case you really need an event, you can get it like this:

...
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    const inputEl = inputRef.current;
    if (!inputEl) return;

    const handleInput = (e: Event) => {
      // Your logic
    };

    inputEl.addEventListener('input', handleInput);

    return () => inputEl.removeEventListener('input', handleInput);
  }, [onChange]);

  return (
      <OTPInput
         ref={inputRef}
         ...
      />
  );
...