Merge pull request #9240 from tdnl/fix-autocomplete-oninputchange

fix AutocompleteInput's onInputChange is never called
marmelab · Sep 1, 2023 · 21c4eaf · 21c4eaf
2 parents 8667091 + c4de05c
commit 21c4eaf
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git 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('<AutocompleteInput />', () => {
         await checkInputValue('prefers_zero-number', '0');
         await checkInputValue('prefers_valid-value', '1');
     });
+
+    it('should call the onInputChange callback', async () => {
+        const onInputChange = jest.fn();
+
+        render(
+            <AdminContext dataProvider={testDataProvider()}>
+                <SimpleForm onSubmit={jest.fn()}>
+                    <AutocompleteInput
+                        {...defaultProps}
+                        onInputChange={onInputChange}
+                    />
+                </SimpleForm>
+            </AdminContext>
+        );
+        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
@@ -173,6 +173,7 @@ export const AutocompleteInput = <
         translateChoice,
         validate,
         variant,
+        onInputChange,
         ...rest
     } = props;
 
@@ -449,18 +450,21 @@ 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)
         ) {
             setFilterValue(newInputValue);
             debouncedSetFilter(newInputValue);
         }
+
+        onInputChange?.(event, newInputValue, reason);
     };
 
     const doesQueryMatchSelection = useCallback(