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) {