Merge pull request #7889 from marmelab/fix-autocompleteinput-perpage

Fix AutocompleteInput Paginate Passed Choices
marmelab · Jun 24, 2022 · 415ce8b · 415ce8b
2 parents bc0898d + 0ad82d5
commit 415ce8b
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 2 deletions.
diff --git a/packages/ra-core/src/form/choices/useChoicesContext.ts b/packages/ra-core/src/form/choices/useChoicesContext.ts
@@ -9,7 +9,11 @@ export const useChoicesContext = <ChoicesType extends RaRecord = RaRecord>(
     const context = useContext(ChoicesContext) as ChoicesContextValue<
         ChoicesType
     >;
-    const { data, ...list } = useList<ChoicesType>({ data: options.choices });
+    const { data, ...list } = useList<ChoicesType>({
+        data: options.choices,
+        // When not in a ChoicesContext, paginating does not make sense (e.g. AutocompleteInput).
+        perPage: Infinity,
+    });
     const result = useMemo(
         () => ({
             allChoices: context?.allChoices ?? data,

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
@@ -12,7 +12,10 @@ import { SimpleForm } from '../form';
 
 import { AutocompleteInput } from './AutocompleteInput';
 import { useCreateSuggestionContext } from './useSupportCreateSuggestion';
-import { InsideReferenceInput } from './AutocompleteInput.stories';
+import {
+    InsideReferenceInput,
+    VeryLargeOptionsNumber,
+} from './AutocompleteInput.stories';
 import { act } from '@testing-library/react-hooks';
 import { ReferenceArrayInput } from './ReferenceArrayInput';
 import { AutocompleteArrayInput } from './AutocompleteArrayInput';
@@ -935,4 +938,17 @@ describe('<AutocompleteInput />', () => {
             screen.getByText('No options');
         });
     });
+
+    it('should allow a very large number of choices', async () => {
+        render(<VeryLargeOptionsNumber />);
+        await waitFor(() => {
+            expect(screen.getByRole('textbox'));
+        });
+
+        screen.getByRole('textbox').click();
+        userEvent.type(screen.getByRole('textbox'), '1050');
+        await waitFor(() => {
+            screen.getByText(/Dalmatian #1050/);
+        });
+    });
 });
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
@@ -9,6 +9,7 @@ import {
     DialogActions,
     Button,
     Stack,
+    Typography,
 } from '@mui/material';
 
 import { Edit } from '../detail';
@@ -418,3 +419,42 @@ export const InsideReferenceInputWithCreationSupport = () => (
         <Resource name="books" edit={BookEditWithReferenceAndCreationSupport} />
     </Admin>
 );
+
+const DalmatianEdit = () => {
+    const dalmatians: any[] = [];
+    for (let index = 0; index < 1100; index++) {
+        dalmatians.push({
+            id: index + 1,
+            name: `Dalmatian #${index + 1}`,
+            altData: `altData  #${index + 1}`,
+        });
+    }
+
+    return (
+        <Edit mutationMode="pessimistic">
+            <SimpleForm>
+                <Typography aria-label="count" variant="body2">
+                    choices: {dalmatians.length}
+                </Typography>
+                <AutocompleteInput
+                    source="dalmatians"
+                    choices={dalmatians}
+                    fullWidth
+                />
+            </SimpleForm>
+        </Edit>
+    );
+};
+
+export const VeryLargeOptionsNumber = () => {
+    return (
+        <Admin
+            dataProvider={dataProvider}
+            history={createMemoryHistory({
+                initialEntries: ['/dalmatians/1'],
+            })}
+        >
+            <Resource name="dalmatians" edit={<DalmatianEdit />} />
+        </Admin>
+    );
+};