Merge pull request #8123 from marmelab/fix-autocomplete-clearonblur

Fix AutocompleteInput `clearOnBlur` has no effect

Author: fzaninotto

packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx

@@ -875,7 +875,7 @@ describe('<AutocompleteInput />', () => {
         fireEvent.blur(input);
         fireEvent.focus(input);
         await waitFor(() => {
-            expect(screen.queryAllByRole('option').length).toEqual(2);
+            expect(screen.queryAllByRole('option').length).toEqual(3);
         });
     });
 
@@ -1234,4 +1234,30 @@ describe('<AutocompleteInput />', () => {
             screen.getByText(/Dalmatian #1050/);
         });
     });
+
+    it('should clear the input when its blurred, having an unmatching selection and clearOnBlur prop is true', async () => {
+        render(
+            <AdminContext dataProvider={testDataProvider()}>
+                <SimpleForm onSubmit={jest.fn()}>
+                    <AutocompleteInput
+                        {...defaultProps}
+                        clearOnBlur
+                        choices={[
+                            { id: 1, name: 'ab' },
+                            { id: 2, name: 'abc' },
+                            { id: 3, name: '123' },
+                        ]}
+                    />
+                </SimpleForm>
+            </AdminContext>
+        );
+        const input = screen.getByLabelText(
+            'resources.users.fields.role'
+        ) as HTMLInputElement;
+        fireEvent.change(input, { target: { value: 'no match' } });
+        fireEvent.blur(input);
+        await waitFor(() => {
+            expect(input.value).toEqual('');
+        });
+    });
 });

packages/ra-ui-materialui/src/input/AutocompleteInput.tsx

@@ -127,6 +127,7 @@ export const AutocompleteInput = <
     const {
         choices: choicesProp,
         className,
+        clearOnBlur = true,
         clearText = 'ra.action.clear_input_value',
         closeText = 'ra.action.close',
         create,
@@ -350,6 +351,14 @@ If you provided a React element for the optionText prop, you must also provide t
         [getChoiceText, inputText, createId]
     );
 
+    const finalOnBlur = useCallback((): void => {
+        if (clearOnBlur) {
+            const optionLabel = getOptionLabel(selectedChoice);
+            setFilterValue(optionLabel);
+        }
+        field.onBlur();
+    }, [clearOnBlur, field, selectedChoice, getOptionLabel]);
+
     useEffect(() => {
         if (!multiple) {
             const optionLabel = getOptionLabel(selectedChoice);
@@ -523,7 +532,7 @@ If you provided a React element for the optionText prop, you must also provide t
                         : noOptionsText
                 }
                 selectOnFocus
-                clearOnBlur
+                clearOnBlur={clearOnBlur}
                 {...sanitizeInputRestProps(rest)}
                 freeSolo={!!create || !!onCreate}
                 handleHomeEndKeys={!!create || !!onCreate}
@@ -543,7 +552,7 @@ If you provided a React element for the optionText prop, you must also provide t
                 }
                 value={selectedChoice}
                 onChange={handleAutocompleteChange}
-                onBlur={field.onBlur}
+                onBlur={finalOnBlur}
                 onInputChange={handleInputChange}
                 renderOption={(props, record: RaRecord) => {
                     (props as {