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