Merge pull request #8303 from marmelab/fix-autocompleteinput-in-referenceinput-repopulate-suggestions

Fix suggestions do not repopulate on blur in `AutocompleteInput` when used inside `ReferenceInput`

Author: fzaninotto

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

@@ -1330,6 +1330,30 @@ describe('<AutocompleteInput />', () => {
             expect(screen.queryByText('Leo Tolstoy')).toBeNull();
         });
 
+        it('should repopulate the suggestions after the suggestions are dismissed', async () => {
+            render(<InsideReferenceInput />);
+            const input = await screen.findByLabelText('Author');
+            fireEvent.focus(input);
+            await waitFor(() => {
+                expect(screen.queryByText('Victor Hugo')).not.toBeNull();
+            });
+            fireEvent.change(input, { target: { value: 'bar' } });
+            await waitFor(
+                () => {
+                    expect(screen.queryByText('Victor Hugo')).toBeNull();
+                },
+                { timeout: 2000 }
+            );
+            fireEvent.blur(input);
+            fireEvent.focus(input);
+            await waitFor(
+                () => {
+                    expect(screen.queryByText('Victor Hugo')).not.toBeNull();
+                },
+                { timeout: 2000 }
+            );
+        });
+
         it('should not change an undefined value to empty string', async () => {
             const onSuccess = jest.fn();
             render(<InsideReferenceInputDefaultValue onSuccess={onSuccess} />);

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

@@ -409,10 +409,20 @@ If you provided a React element for the optionText prop, you must also provide t
     const finalOnBlur = useCallback((): void => {
         if (clearOnBlur) {
             const optionLabel = getOptionLabel(selectedChoice);
-            setFilterValue(optionLabel);
+            if (!isEqual(optionLabel, filterValue)) {
+                setFilterValue(optionLabel);
+                debouncedSetFilter('');
+            }
         }
         field.onBlur();
-    }, [clearOnBlur, field, selectedChoice, getOptionLabel]);
+    }, [
+        clearOnBlur,
+        field,
+        getOptionLabel,
+        selectedChoice,
+        filterValue,
+        debouncedSetFilter,
+    ]);
 
     useEffect(() => {
         if (!multiple) {