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 https://github.com/marmelab/react-admin/blob/10cc3218319e8642ad3cd1990c5cc52065e7555c/packages/ra-ui-materialui/src/input/NumberInput.tsx#L116-L119 Where I would expect it to be just like the handleFocus function. https://github.com/marmelab/react-admin/blob/10cc3218319e8642ad3cd1990c5cc52065e7555c/packages/ra-ui-materialui/src/input/NumberInput.tsx#L109-L112 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: https://github.com/marmelab/react-admin/blob/54defedf6aad0ba95c562c01f887858c2f045eea/packages/ra-core/src/form/useInput.ts#L97-L102 Then you pass it to the return object of useInput hook https://github.com/marmelab/react-admin/blob/54defedf6aad0ba95c562c01f887858c2f045eea/packages/ra-core/src/form/useInput.ts#L115-L128 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. https://github.com/marmelab/react-admin/blob/54defedf6aad0ba95c562c01f887858c2f045eea/packages/ra-core/src/form/useInput.ts#L155-L161

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