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(