Merge pull request #10033 from marmelab/fix/issue-9993/AutoCompleteIn…

…put-clear-button-does-not-clear-new-choice Fix `<AutocompleteInput>` clear button does not clear new choice
marmelab · Jul 22, 2024 · f574cd9 · f574cd9
2 parents 4b3dff0 + bb59bb5
commit f574cd9
Show file tree

Hide file tree

Showing 2 changed files with 42 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
@@ -24,6 +24,7 @@ import {
     OnChange,
     InsideReferenceInputOnChange,
     WithInputProps,
+    OnCreate,
 } from './AutocompleteInput.stories';
 import { act } from '@testing-library/react-hooks';
 import { ReferenceArrayInput } from './ReferenceArrayInput';
@@ -1692,6 +1693,35 @@ describe('<AutocompleteInput />', () => {
         });
     });
 
+    it('should clear the input mutiple tiles with on create set', async () => {
+        render(<OnCreate />);
+        let input = (await screen.findByLabelText(
+            'Author'
+        )) as HTMLInputElement;
+
+        fireEvent.focus(input);
+        expect(screen.getAllByRole('option')).toHaveLength(5);
+        expect(screen.queryByText('Create New choice')).toBeNull();
+
+        userEvent.type(input, 'New choice');
+        expect(screen.getAllByRole('option')).toHaveLength(1);
+        expect(screen.getByText('Create New choice')).toBeDefined();
+
+        fireEvent.click(screen.getByLabelText('Clear value'));
+        expect(input.value).toEqual('');
+        expect(screen.getAllByRole('option')).toHaveLength(6);
+        expect(screen.queryByText('Create New choice')).toBeNull();
+
+        userEvent.type(input, 'New choice');
+        expect(screen.getAllByRole('option')).toHaveLength(1);
+        expect(screen.getByText('Create New choice')).toBeDefined();
+
+        fireEvent.click(screen.getByLabelText('Clear value'));
+        expect(screen.getAllByRole('option')).toHaveLength(6);
+        expect(screen.queryByText('Create New choice')).toBeNull();
+        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
@@ -467,7 +467,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);
     };
 
@@ -523,13 +526,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);