diff --git a/packages/ra-core/src/form/choices/useChoicesContext.ts b/packages/ra-core/src/form/choices/useChoicesContext.ts index 44ef0b8c9c9..da67dd62a30 100644 --- 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 = ( const context = useContext(ChoicesContext) as ChoicesContextValue< ChoicesType >; - const { data, ...list } = useList({ data: options.choices }); + const { data, ...list } = useList({ + 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 index 092f5802b86..332a375361e 100644 --- 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('', () => { screen.getByText('No options'); }); }); + + it('should allow a very large number of choices', async () => { + render(); + 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 index 1e4bd0e7ec0..69e750b3f56 100644 --- 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 = () => ( ); + +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 ( + + + + choices: {dalmatians.length} + + + + + ); +}; + +export const VeryLargeOptionsNumber = () => { + return ( + + } /> + + ); +};