NumberInput's onBlur prop does not provide an event object

[yanchesky]

What you were expecting:
I expected that the onBlur event handler on NumberInput component would receive an event as an argument.

What happened instead:
The function provided to the onBlur prop receives undefined instead of the SyntheticBaseEvent.

Steps to reproduce:
Simply add the following prop to the NumberInput component.

onBlur={event => console.log("event:", event)} //  "event: undefined"

Related code:
Here is the implementation that causes such behavior

react-admin/packages/ra-ui-materialui/src/input/NumberInput.tsx

Lines 116 to 119 in 10cc321

	const handleBlur = () => {
	if (onBlurFromField) {
	onBlurFromField();
	}

Where I would expect it to be just like the handleFocus function.

react-admin/packages/ra-ui-materialui/src/input/NumberInput.tsx

Lines 109 to 112 in 10cc321

	const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
	if (onFocus) {
	onFocus(event);
	}

However, it's not straightforward to fix. Simple solution as below works but raises typescript error TS2554: Expected 0 arguments, but got 1

const handleBlur = (event) => {
    if (onBlurFromField) {
        onBlurFromField(event);
    }
}

That's because the type of the field's onBlur function is () => void. This is reasonable because in react-hook-form that function is used to programmatically blur an input, not to hook into an event. However below you overwrite react-hook-form useController's onBlur function to support passing events:

react-admin/packages/ra-core/src/form/useInput.ts

Lines 97 to 102 in 54defed

	const onBlur = useEvent((...event: any[]) => {
	controllerField.onBlur();
	if (initialOnBlur) {
	initialOnBlur(...event);
	}
	});

Then you pass it to the return object of useInput hook

react-admin/packages/ra-core/src/form/useInput.ts

Lines 115 to 128 in 54defed

	const field = {
	...controllerField,
	value: format ? format(controllerField.value) : controllerField.value,
	onBlur,
	onChange,
	};
	return {
	id: id || source,
	field,
	fieldState,
	formState,
	isRequired: isRequiredOption || isRequired(validate),
	};

The problem is that return type of field property is ControllerRenderProps whose onBlur function is () => void but should be something like (...event: any[]) => void

The issue lies in the return type of the field property, which is ControllerRenderProps. The onBlur function within it is specified as () => void, yet it ought to be defined as (...event: any[]) => void.

react-admin/packages/ra-core/src/form/useInput.ts

Lines 155 to 161 in 54defed

	export type UseInputValue = {
	id: string;
	isRequired: boolean;
	field: ControllerRenderProps;
	formState: UseFormStateReturn<Record<string, string>>;
	fieldState: ControllerFieldState;
	};

Other information:
That behavior was also observed in the AutocompleteInput component.

Environment

• React-admin version: 4.16.13

[erwanMarmelab]

Thank you for this really complete issue.

Would you like to open a PR to implement it?

[yanchesky]

Sure I will