diff --git a/packages/ra-core/src/form/useInput.ts b/packages/ra-core/src/form/useInput.ts index 663669b0c06..d2b33ad56b6 100644 --- a/packages/ra-core/src/form/useInput.ts +++ b/packages/ra-core/src/form/useInput.ts @@ -17,6 +17,7 @@ import { useFormGroupContext } from './useFormGroupContext'; import { useGetValidationErrorMessage } from './useGetValidationErrorMessage'; import { useFormGroups } from './useFormGroups'; import { useApplyInputDefaultValues } from './useApplyInputDefaultValues'; +import { useEvent } from '../util'; // replace null or undefined values by empty string to avoid controlled/uncontrolled input warning const defaultFormat = (value: any) => (value == null ? '' : value); @@ -30,8 +31,8 @@ export const useInput = (props: InputProps): UseInputValue => { id, isRequired: isRequiredOption, name, - onBlur, - onChange, + onBlur: initialOnBlur, + onChange: initialOnChange, parse = defaultParse, source, validate, @@ -89,27 +90,29 @@ export const useInput = (props: InputProps): UseInputValue => { // no value for the input. useApplyInputDefaultValues(props); + const onBlur = useEvent((...event: any[]) => { + if (initialOnBlur) { + initialOnBlur(...event); + } + controllerField.onBlur(); + }); + + const onChange = useEvent((...event: any[]) => { + if (initialOnChange) { + initialOnChange(...event); + } + const eventOrValue = (props.type === 'checkbox' && + event[0]?.target?.value === 'on' + ? event[0].target.checked + : event[0]?.target?.value ?? event[0]) as any; + controllerField.onChange(parse ? parse(eventOrValue) : eventOrValue); + }); + const field = { ...controllerField, value: format ? format(controllerField.value) : controllerField.value, - onBlur: (...event: any[]) => { - if (onBlur) { - onBlur(...event); - } - controllerField.onBlur(); - }, - onChange: (...event: any[]) => { - if (onChange) { - onChange(...event); - } - const eventOrValue = (props.type === 'checkbox' && - event[0]?.target?.value === 'on' - ? event[0].target.checked - : event[0]?.target?.value ?? event[0]) as any; - controllerField.onChange( - parse ? parse(eventOrValue) : eventOrValue - ); - }, + onBlur, + onChange, }; return {