diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx index 585d1c108f9..71cead83a37 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx @@ -431,6 +431,35 @@ describe('', () => { ).not.toBeNull(); }); + it('should allow customized rendering of option items', () => { + const OptionItem = props => { + const record = useRecordContext(); + return
; + }; + + render( + + + } + matchSuggestion={() => true} + inputText={record => record?.name} + choices={[ + { id: 1, name: 'bar' }, + { id: 2, name: 'foo' }, + ]} + /> + + + ); + + const input = screen.getByLabelText('resources.users.fields.role'); + fireEvent.focus(input); + + expect(screen.queryByLabelText('bar')).not.toBeNull(); + }); + it('should reset filter when input value changed', async () => { const setFilter = jest.fn(); const { rerender } = render( diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx index 69e750b3f56..4437474fecf 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Admin } from 'react-admin'; +import { Admin, AdminContext } from 'react-admin'; import { Resource, required, useCreate, useRecordContext } from 'ra-core'; import { createMemoryHistory } from 'history'; import { @@ -420,6 +420,36 @@ export const InsideReferenceInputWithCreationSupport = () => ( ); +const OptionItem = props => { + const record = useRecordContext(); + return ( +
+ {`from optionText: ${record && record.name}`} +
+ ); +}; + +export const CustomizedItemRendering = () => { + return ( + + {}} defaultValues={{ role: 2 }}> + } + inputText={record => `from inputText ${record?.name}`} + matchSuggestion={() => true} + choices={[ + { id: 1, name: 'bar' }, + { id: 2, name: 'foo' }, + ]} + /> + + + ); +}; + const DalmatianEdit = () => { const dalmatians: any[] = []; for (let index = 0; index < 1100; index++) {