diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
index d30053c8ede..3e744d090b6 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
@@ -992,7 +992,7 @@ describe('', () => {
);
const input = screen.getByLabelText('resources.users.fields.role');
- fireEvent.change(input, { target: { value: 'a' } });
+ userEvent.type(input, 'a');
await waitFor(() => {
expect(screen.queryAllByRole('option').length).toEqual(2);
});
@@ -1019,7 +1019,7 @@ describe('', () => {
);
const input = screen.getByLabelText('resources.users.fields.role');
- fireEvent.change(input, { target: { value: 'ab' } });
+ userEvent.type(input, 'ab');
await waitFor(() =>
expect(screen.queryAllByRole('option').length).toEqual(2)
);
@@ -1355,8 +1355,7 @@ describe('', () => {
'Author'
)) as HTMLInputElement;
expect(input.value).toBe('Leo Tolstoy');
- fireEvent.mouseDown(input);
- fireEvent.change(input, { target: { value: 'Leo Tolstoy test' } });
+ userEvent.type(input, 'Leo Tolstoy test');
// Make sure that 'Leo Tolstoy' did not reappear
let testFailed = false;
try {
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
index d9b19d55e67..c392d9d7054 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
@@ -1121,8 +1121,9 @@ export const WithInputOnChange = () => {
source="role"
resource="users"
choices={[
- { id: 1, name: 'bar' },
- { id: 2, name: 'foo' },
+ { id: 1, name: 'ab' },
+ { id: 2, name: 'abc' },
+ { id: 3, name: '123' },
]}
onInputChange={(_, value: string) => {
setSearchText(value);
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
index 4ca8e15b21b..91561c06a8a 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -528,13 +528,10 @@ If you provided a React element for the optionText prop, you must also provide t
>['onInputChange']
>(
(event, newInputValue, reason) => {
- if (
- typeof event?.type === 'string' ||
- !doesQueryMatchSelection(newInputValue)
- ) {
+ setFilterValue(newInputValue);
+ if (!doesQueryMatchSelection(newInputValue)) {
debouncedSetFilter(newInputValue);
}
- setFilterValue(newInputValue);
onInputChange?.(event, newInputValue, reason);
},
[debouncedSetFilter, doesQueryMatchSelection, onInputChange]