Merge pull request #10023 from marmelab/fix-autocomplete-clear-button

fix `<AutocompleteInput>` clear button does not clear new choice
marmelab · Jul 19, 2024 · 452b120 · 452b120
2 parents 194fb4c + cc04494
commit 452b120
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
@@ -25,6 +25,7 @@ import {
     OnChange,
     InsideReferenceInputOnChange,
     WithInputProps,
+    OnCreate,
 } from './AutocompleteInput.stories';
 import { ReferenceArrayInput } from './ReferenceArrayInput';
 import { AutocompleteArrayInput } from './AutocompleteArrayInput';
@@ -1687,6 +1688,21 @@ describe('<AutocompleteInput />', () => {
         });
     });
 
+    it('should clear the input mutiple tiles with on create set', async () => {
+        render(<OnCreate />);
+
+        const input = (await screen.findByLabelText(
+            'Author'
+        )) as HTMLInputElement;
+        userEvent.type(input, 'New choice');
+        const clear = screen.getByLabelText('Clear value');
+        fireEvent.click(clear);
+        expect(input.value).toEqual('');
+        userEvent.type(input, 'New choice');
+        fireEvent.click(clear);
+        expect(input.value).toEqual('');
+    });
+
     it('should handle nullish values', async () => {
         render(<NullishValuesSupport />);
 

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -468,7 +468,10 @@ If you provided a React element for the optionText prop, you must also provide t
             setFilterValue(newInputValue);
             debouncedSetFilter(newInputValue);
         }
-
+        if (reason === 'clear') {
+            setFilterValue('');
+            debouncedSetFilter('');
+        }
         onInputChange?.(event, newInputValue, reason);
     };
 
@@ -524,13 +527,14 @@ If you provided a React element for the optionText prop, you must also provide t
         return filteredOptions;
     };
 
-    const handleAutocompleteChange = (
-        event: any,
-        newValue: any,
-        _reason: string
-    ) => {
-        handleChangeWithCreateSupport(newValue != null ? newValue : emptyValue);
-    };
+    const handleAutocompleteChange = useCallback(
+        (event: any, newValue: any, _reason: string) => {
+            handleChangeWithCreateSupport(
+                newValue != null ? newValue : emptyValue
+            );
+        },
+        [emptyValue, handleChangeWithCreateSupport]
+    );
 
     const oneSecondHasPassed = useTimeout(1000, filterValue);