diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx index 872843fcf1a..d30053c8ede 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx @@ -1532,4 +1532,24 @@ describe('', () => { await checkInputValue('prefers_zero-number', '0'); await checkInputValue('prefers_valid-value', '1'); }); + + it('should call the onInputChange callback', async () => { + const onInputChange = jest.fn(); + + render( + + + + + + ); + const input = screen.getByLabelText( + 'resources.users.fields.role' + ) as HTMLInputElement; + fireEvent.change(input, { target: { value: 'newValue' } }); + await waitFor(() => expect(onInputChange).toHaveBeenCalled()); + }); }); diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx index ecd7b58e6a8..9b049ed6e01 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx @@ -173,6 +173,7 @@ export const AutocompleteInput = < translateChoice, validate, variant, + onInputChange, ...rest } = props; @@ -449,11 +450,12 @@ If you provided a React element for the optionText prop, you must also provide t } }, [getOptionLabel, multiple, selectedChoice]); - const handleInputChange = ( - event: any, - newInputValue: string, - _reason: string - ) => { + const handleInputChange: AutocompleteProps< + OptionType, + Multiple, + DisableClearable, + SupportCreate + >['onInputChange'] = (event, newInputValue, reason) => { if ( event?.type === 'change' || !doesQueryMatchSelection(newInputValue) @@ -461,6 +463,8 @@ If you provided a React element for the optionText prop, you must also provide t setFilterValue(newInputValue); debouncedSetFilter(newInputValue); } + + onInputChange?.(event, newInputValue, reason); }; const doesQueryMatchSelection = useCallback(