Merge pull request #11263 from marmelab/fix/3166-autocomplete-suggestions

Fix(AutocompleteInput): do not open autocomplete options when shouldRenderSuggestions returns false

Author: fzaninotto

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

@@ -708,17 +708,19 @@ describe('<AutocompleteInput />', () => {
         });
     });
 
-    it('should respect shouldRenderSuggestions over default if passed in', async () => {
+    it('should not open the suggestions popper when shouldRenderSuggestions returns false', async () => {
         render(
             <AdminContext dataProvider={testDataProvider()}>
                 <ResourceContextProvider value="posts">
                     <SimpleForm
                         onSubmit={jest.fn()}
-                        defaultValues={{ role: 2 }}
+                        defaultValues={{ role: null }}
                     >
                         <AutocompleteInput
                             {...defaultProps}
-                            shouldRenderSuggestions={() => false}
+                            shouldRenderSuggestions={(v: string) =>
+                                v.length >= 2
+                            }
                             noOptionsText="No options"
                             choices={[
                                 { id: 1, name: 'bar' },
@@ -730,11 +732,21 @@ describe('<AutocompleteInput />', () => {
             </AdminContext>
         );
 
-        const input = screen.getByLabelText('resources.users.fields.role');
+        const input = screen.getByLabelText(
+            'resources.users.fields.role'
+        ) as HTMLInputElement;
         fireEvent.focus(input);
+
+        // popper must NOT open while shouldRenderSuggestions returns false
+        expect(screen.queryByRole('listbox')).toBeNull();
+        expect(screen.queryByText('No options')).toBeNull();
+
+        // typing 2+ chars satisfies the predicate -> popper opens
+        fireEvent.change(input, { target: { value: 'fo' } });
         await waitFor(() => {
-            expect(screen.queryByText('foo')).toBeNull();
+            expect(screen.queryByRole('listbox')).not.toBeNull();
         });
+        expect(screen.queryByText('foo')).not.toBeNull();
     });
 
     it('should not fail when value is null and new choices are applied', () => {

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

@@ -878,6 +878,39 @@ export const InsideReferenceInputWithDisableChoice = () => (
     </TestMemoryRouter>
 );
 
+const enableGetChoicesMinTwoChars = (filters: any) => filters?.q?.length >= 2;
+const shouldRenderSuggestionsMinTwoChars = (v: string) => v.length >= 2;
+
+export const InsideReferenceInputWithShouldRenderSuggestions = () => (
+    <TestMemoryRouter initialEntries={['/books/1']}>
+        <Admin dataProvider={dataProviderWithAuthors}>
+            <Resource name="authors" />
+            <Resource
+                name="books"
+                edit={() => (
+                    <Edit mutationMode="pessimistic">
+                        <SimpleForm>
+                            <ReferenceInput
+                                reference="authors"
+                                source="author"
+                                enableGetChoices={enableGetChoicesMinTwoChars}
+                            >
+                                <AutocompleteInput
+                                    optionText="name"
+                                    noOptionsText="Type 2+ chars to search"
+                                    shouldRenderSuggestions={
+                                        shouldRenderSuggestionsMinTwoChars
+                                    }
+                                />
+                            </ReferenceInput>
+                        </SimpleForm>
+                    </Edit>
+                )}
+            />
+        </Admin>
+    </TestMemoryRouter>
+);
+
 const LanguageChangingAuthorInput = ({ onChange }) => {
     const { setValue } = useFormContext();
     const handleChange = (value, record) => {

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

@@ -1,52 +1,53 @@
-import * as React from 'react';
-import {
-    isValidElement,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-    useState,
-    type ReactNode,
-} from 'react';
-import debounce from 'lodash/debounce.js';
-import get from 'lodash/get.js';
-import isEqual from 'lodash/isEqual.js';
-import clsx from 'clsx';
 import {
     Autocomplete,
     type AutocompleteChangeReason,
+    type AutocompleteCloseReason,
     type AutocompleteProps,
     Chip,
+    createFilterOptions,
     TextField,
     type TextFieldProps,
-    createFilterOptions,
     useForkRef,
 } from '@mui/material';
 import {
     type ComponentsOverrides,
     styled,
     useThemeProps,
 } from '@mui/material/styles';
+import clsx from 'clsx';
+import debounce from 'lodash/debounce.js';
+import get from 'lodash/get.js';
+import isEqual from 'lodash/isEqual.js';
 import {
     type ChoicesProps,
     FieldTitle,
     type RaRecord,
+    type SupportCreateSuggestionOptions,
     useChoicesContext,
+    useEvent,
+    useGetRecordRepresentation,
     useInput,
     useSuggestions,
     type UseSuggestionsOptions,
+    useSupportCreateSuggestion,
     useTimeout,
     useTranslate,
     warning,
-    useGetRecordRepresentation,
-    useEvent,
-    type SupportCreateSuggestionOptions,
-    useSupportCreateSuggestion,
 } from 'ra-core';
+import * as React from 'react';
+import {
+    isValidElement,
+    type ReactNode,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import { Offline } from '../Offline';
 import type { CommonInputProps } from './CommonInputProps';
 import { InputHelperText } from './InputHelperText';
 import { sanitizeInputRestProps } from './sanitizeInputRestProps';
-import { Offline } from '../Offline';
 
 const defaultFilterOptions = createFilterOptions();
 
@@ -171,7 +172,9 @@ export const AutocompleteInput = <
         offline = defaultOffline,
         onBlur,
         onChange,
+        onClose: onCloseProp,
         onCreate,
+        onOpen: onOpenProp,
         openText = 'ra.action.open',
         optionText,
         optionValue,
@@ -338,6 +341,23 @@ If you provided a React element for the optionText prop, you must also provide t
 
     const [filterValue, setFilterValue] = useState('');
 
+    const [isOpen, setIsOpen] = useState(false);
+    const canRenderSuggestions =
+        shouldRenderSuggestions == undefined || // eslint-disable-line eqeqeq
+        shouldRenderSuggestions(filterValue);
+
+    const handleOpen = useEvent((event: React.SyntheticEvent) => {
+        setIsOpen(true);
+        onOpenProp?.(event);
+    });
+
+    const handleClose = useEvent(
+        (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => {
+            setIsOpen(false);
+            onCloseProp?.(event, reason);
+        }
+    );
+
     const handleChange = useEvent((newValue: any) => {
         if (multiple) {
             if (Array.isArray(newValue)) {
@@ -755,13 +775,15 @@ If you provided a React element for the optionText prop, you must also provide t
                 clearOnBlur={clearOnBlur}
                 {...sanitizeInputRestProps(rest)}
                 freeSolo={!!create || !!onCreate}
+                open={isOpen && canRenderSuggestions}
+                onOpen={handleOpen}
+                onClose={handleClose}
                 handleHomeEndKeys={!!create || !!onCreate}
                 filterOptions={filterOptions}
                 options={
                     isPaused && isPlaceholderData
                         ? []
-                        : shouldRenderSuggestions == undefined || // eslint-disable-line eqeqeq
-                            shouldRenderSuggestions(filterValue)
+                        : canRenderSuggestions
                           ? suggestions
                           : []
                 }