NumberField + useController React Hook Form

[cojoclaudiu]

Hi, I'm this example for my component and I'm trying to make a controlled component using React Hook form but when the input is empty and I click outside I get a 0 value inside the input instead of empty input.

Is there any way to fix this?
Demo: https://codesandbox.io/s/usecontroller-forked-viw53w?file=/src/App.js

function ControlledNumberField<TFieldValues extends FieldValues = FieldValues>({
	name,
	control,
	defaultValue,
	...props
}: ControlledNumberFieldProp<TFieldValues>) {
	const {
		field: { value, ...field },
		fieldState: { error },
	} = useController({ name, defaultValue, control });

	return (
		<NumberField
			aria-describedby={props.label}
			aria-invalid={Boolean(error)}
			errorMessage={error?.message}
			value={value}
			{...field}
			{...props}
		/>
	);
}```

[snowystinger]

We don't fire an event if it's empty and you click in and back outside https://codesandbox.io/s/magical-lake-zrslyr?file=/src/App.js so I would look and see if React Hook Form is doing something. Maybe related to react-hook-form/react-hook-form#6287 ?

Otherwise, you could make a codesandbox here reproducing the issue with explicit steps on how to interact with the UI to cause the bug. Maybe I missed a step just now.

[snowystinger]

Ah, right, so one issue is that value can only be of type number, so to pass no number, you can use NaN

I've addressed it in your codesandbox using a combination of these pages of documentation and discussion and here's the working sandbox
https://codesandbox.io/s/usecontroller-forked-qbginj?file=/src/App.js

react-hook-form/react-hook-form#6287
https://github.com/orgs/react-hook-form/discussions/8068
https://react-spectrum.adobe.com/react-spectrum/NumberField.html#props

[cojoclaudiu]

@snowystinger thank you for help, I've fixed the issue based on your reply

Later edit: actually not working

function ControlledNumberField<TFieldValues extends FieldValues = FieldValues>({
	name,
	control,
	defaultValue,
	...props
}: ControlledNumberFieldProp<TFieldValues>) {
	const {
		field: { value, ...field },
		fieldState: { error },
	} = useController({ name, defaultValue, control });

	return (
		<NumberField
			aria-describedby={props.label}
			aria-invalid={Boolean(error)}
			value={+(value || NaN)}
			errorMessage={error?.message}
			defaultValue={+(defaultValue || NaN)}
			{...field}
			{...props}
		/>
	);
}

[snowystinger]

I think your ...field is overwriting the value and defaultValue you've specified, you'd need to do it in this order instead

			errorMessage={error?.message}
			{...field}
			{...props}
			value={+(value || NaN)}
			defaultValue={+(defaultValue || NaN)}

[cojoclaudiu]

@snowystinger I think the values is not passed to the inputValue from useNumberFieldState. If I pass the value from the controlled to the inputValue than I got the correct input, but this will brake the zod validation

[snowystinger]

I've stripped out most everything in my sandbox copy https://codesandbox.io/s/usecontroller-forked-qbginj?file=/src/App.js
I'm not sure you need the lines value={+(value || NaN)} or defaultValue={+(defaultValue || NaN)} or even the override to onChange I provided before.

Please let me know if this version has your issue. Otherwise I'll need a sandbox with the minimum setup and clearly defined steps on how to reproduce with expectations at each step vs reality. I apologize if I'm misunderstanding you. Thank you for your understanding.