diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
index d635df1bad5..86f9199b2b2 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
@@ -1330,6 +1330,30 @@ describe('', () => {
expect(screen.queryByText('Leo Tolstoy')).toBeNull();
});
+ it('should repopulate the suggestions after the suggestions are dismissed', async () => {
+ render();
+ 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();
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
index 7c5367d1ab5..9fb6f0ac9e3 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -410,10 +410,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) {