Support ReactNode as create label in AutocompleteInput, AutocompleteArrayInput, SelectInput and SelectArrayInput.

Madeorsk · Madeorsk · commit cf53a23141f7 · 2025-08-07T12:07:54.000+02:00
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.tsx
@@ -14,6 +14,7 @@ import { AutocompleteArrayInput } from './AutocompleteArrayInput';
 import { useCreateSuggestionContext } from './useSupportCreateSuggestion';
 import {
     CreateItemLabel,
+    CreateItemLabelRendered,
     CreateLabel,
     InsideReferenceArrayInput,
     InsideReferenceArrayInputOnChange,
@@ -1289,4 +1290,40 @@ describe('<AutocompleteArrayInput />', () => {
         });
         expect(screen.getByDisplayValue('French')).not.toBeNull();
     });
+
+    it('should allow to pass rendered createLabel and createItemLabel', async () => {
+        render(<CreateItemLabelRendered />);
+
+        const input = await screen.findByRole('combobox');
+        fireEvent.focus(input);
+        fireEvent.change(input, { target: { value: '' } });
+
+        expect((await screen.findByTestId('new-role-hint')).textContent).toBe(
+            'Start typing to create a new role'
+        );
+
+        fireEvent.change(input, { target: { value: 'Guest' } });
+
+        expect((await screen.findByTestId('new-role-chip')).textContent).toBe(
+            'Guest'
+        );
+    });
+    it('should not use the rendered createItemLabel as the value of the input', async () => {
+        render(<CreateItemLabelRendered />);
+        const input = (await screen.findByLabelText('Roles', undefined, {
+            timeout: 2000,
+        })) as HTMLInputElement;
+        await waitFor(() => {
+            expect(input.value).toBe('');
+        });
+        fireEvent.focus(input);
+        expect(screen.getAllByRole('option')).toHaveLength(3);
+        fireEvent.change(input, { target: { value: 'x' } });
+        await waitFor(() => {
+            expect(screen.getAllByRole('option')).toHaveLength(1);
+        });
+        fireEvent.click(screen.getByText('Create'));
+        expect(input.value).not.toBe('Create x');
+        expect(input.value).toBe('');
+    }, 10000);
 });
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.stories.tsx b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.stories.tsx
@@ -4,12 +4,14 @@ import { Admin } from 'react-admin';
 import CloseIcon from '@mui/icons-material/Close';
 import {
     Button,
+    Chip,
     Dialog,
     DialogActions,
     DialogContent,
     DialogTitle,
     IconButton,
     TextField,
+    Typography,
 } from '@mui/material';
 
 import {
@@ -315,6 +317,27 @@ export const CreateItemLabel = () => (
     </Wrapper>
 );
 
+export const CreateItemLabelRendered = () => (
+    <Wrapper>
+        <AutocompleteArrayInput
+            source="roles"
+            choices={choices}
+            sx={{ width: 400 }}
+            create={<CreateRole />}
+            createLabel={
+                <Typography data-testid="new-role-hint">
+                    Start typing to create a new <strong>role</strong>
+                </Typography>
+            }
+            createItemLabel={item => (
+                <Typography component="div">
+                    Create <Chip label={item} data-testid="new-role-chip" />
+                </Typography>
+            )}
+        />
+    </Wrapper>
+);
+
 const dataProvider = {
     getOne: () =>
         Promise.resolve({
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
@@ -29,6 +29,7 @@ import {
     OnCreateSlow,
     CreateLabel,
     CreateItemLabel,
+    CreateItemLabelRendered,
 } from './AutocompleteInput.stories';
 import { ReferenceArrayInput } from './ReferenceArrayInput';
 import { AutocompleteArrayInput } from './AutocompleteArrayInput';
@@ -1989,4 +1990,40 @@ describe('<AutocompleteInput />', () => {
             screen.getByText('Victor Hugo');
         });
     });
+
+    it('should allow to pass rendered createLabel and createItemLabel', async () => {
+        render(<CreateItemLabelRendered />);
+
+        const input = await screen.findByRole('combobox');
+        fireEvent.focus(input);
+        fireEvent.change(input, { target: { value: '' } });
+
+        expect((await screen.findByTestId('new-choice-hint')).textContent).toBe(
+            'Start typing to create a new author'
+        );
+
+        fireEvent.change(input, { target: { value: 'Gustave Flaubert' } });
+
+        expect((await screen.findByTestId('new-choice-chip')).textContent).toBe(
+            'Gustave Flaubert'
+        );
+    });
+    it('should not use the rendered createItemLabel as the value of the input', async () => {
+        render(<CreateItemLabelRendered delay={1500} />);
+        const input = (await screen.findByLabelText('Author', undefined, {
+            timeout: 2000,
+        })) as HTMLInputElement;
+        await waitFor(() => {
+            expect(input.value).toBe('Leo Tolstoy');
+        });
+        fireEvent.focus(input);
+        expect(screen.getAllByRole('option')).toHaveLength(4);
+        fireEvent.change(input, { target: { value: 'x' } });
+        await waitFor(() => {
+            expect(screen.getAllByRole('option')).toHaveLength(1);
+        });
+        fireEvent.click(screen.getByText('Create'));
+        expect(input.value).not.toBe('Create x');
+        expect(input.value).toBe('');
+    }, 10000);
 });
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
@@ -19,6 +19,7 @@ import ExpandCircleDownIcon from '@mui/icons-material/ExpandCircleDown';
 import {
     Box,
     Button,
+    Chip,
     Dialog,
     DialogActions,
     DialogContent,
@@ -41,6 +42,7 @@ import { AutocompleteInput, AutocompleteInputProps } from './AutocompleteInput';
 import { ReferenceInput } from './ReferenceInput';
 import { TextInput } from './TextInput';
 import { useCreateSuggestionContext } from './useSupportCreateSuggestion';
+import { delayedDataProvider } from './common';
 
 export default { title: 'ra-ui-materialui/input/AutocompleteInput' };
 
@@ -597,6 +599,48 @@ export const CreateItemLabel = () => (
     </Wrapper>
 );
 
+const CreateItemLabelRenderedInput = () => {
+    const [choices, setChoices] = useState(choicesForCreationSupport);
+    return (
+        <AutocompleteInput
+            source="author"
+            choices={choices}
+            createLabel={
+                <Typography data-testid="new-choice-hint">
+                    Start typing to create a new <strong>author</strong>
+                </Typography>
+            }
+            createItemLabel={item => (
+                <Typography component="div">
+                    Create <Chip label={item} data-testid="new-choice-chip" />
+                </Typography>
+            )}
+            onCreate={async filter => {
+                const newAuthor = {
+                    id: choices.length + 1,
+                    name: filter,
+                };
+                setChoices(authors => [...authors, newAuthor]);
+                // Wait until next tick to give some time for React to update the state
+                await new Promise(resolve => setTimeout(resolve));
+                return newAuthor;
+            }}
+            TextFieldProps={{
+                placeholder: 'Start typing to create a new item',
+            }}
+            // Disable clearOnBlur because opening the prompt blurs the input
+            // and creates a flicker
+            clearOnBlur={false}
+        />
+    );
+};
+
+export const CreateItemLabelRendered = ({ delay = 0 }: { delay?: number }) => (
+    <Wrapper dataProvider={delayedDataProvider(dataProviderDefault, delay)}>
+        <CreateItemLabelRenderedInput />
+    </Wrapper>
+);
+
 const authorsWithFirstAndLastName = [
     { id: 1, first_name: 'Leo', last_name: 'Tolstoy', language: 'Russian' },
     { id: 2, first_name: 'Victor', last_name: 'Hugo', language: 'French' },
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -447,6 +447,14 @@ If you provided a React element for the optionText prop, you must also provide t
             emptyValue,
         ]
     );
+    const getOptionLabelString = useCallback(
+        (option: any, isListItem: boolean = false) => {
+            const optionLabel = getOptionLabel(option, isListItem);
+            // Can be a ReactNode when it's the create option.
+            return typeof optionLabel === 'string' ? optionLabel : '';
+        },
+        [getOptionLabel]
+    );
 
     const finalOnBlur = useCallback(
         (event): void => {
@@ -493,10 +501,13 @@ If you provided a React element for the optionText prop, you must also provide t
             event?.type === 'change' ||
             !doesQueryMatchSelection(newInputValue)
         ) {
-            const createOptionLabel = translate(createItemLabel, {
-                item: filterValue,
-                _: createItemLabel,
-            });
+            const createOptionLabel =
+                typeof createItemLabel === 'string'
+                    ? translate(createItemLabel, {
+                          item: filterValue,
+                          _: createItemLabel,
+                      })
+                    : undefined;
             const isCreate = newInputValue === createOptionLabel;
             const valueToSet = isCreate ? filterValue : newInputValue;
             setFilterValue(valueToSet);
@@ -722,7 +733,8 @@ If you provided a React element for the optionText prop, you must also provide t
                         ? suggestions
                         : []
                 }
-                getOptionLabel={getOptionLabel}
+                getOptionKey={(option: any) => option?.id}
+                getOptionLabel={getOptionLabelString}
                 inputValue={filterValue}
                 loading={
                     isPending &&
diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx
@@ -18,6 +18,7 @@ import {
     InsideReferenceArrayInput,
     InsideReferenceArrayInputDefaultValue,
     CreateLabel,
+    CreateLabelRendered,
 } from './SelectArrayInput.stories';
 
 describe('<SelectArrayInput />', () => {
@@ -629,6 +630,19 @@ describe('<SelectArrayInput />', () => {
         await screen.findByLabelText('Role name');
     });
 
+    it('should support using a custom rendered createLabel', async () => {
+        render(<CreateLabelRendered />);
+        const input = (await screen.findByLabelText(
+            'Roles'
+        )) as HTMLInputElement;
+        fireEvent.mouseDown(input);
+        // Expect the custom create label to be displayed
+        const newRoleLabel = await screen.findByTestId('new-role-label');
+        expect(newRoleLabel.textContent).toBe('Create a new role');
+        fireEvent.click(newRoleLabel);
+        await screen.findByText('Role name');
+    });
+
     it('should receive an event object on change', async () => {
         const choices = [...defaultProps.choices];
         const onChange = jest.fn();
diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.stories.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.stories.tsx
@@ -9,6 +9,7 @@ import {
     IconButton,
     Stack,
     TextField,
+    Typography,
 } from '@mui/material';
 import fakeRestProvider from 'ra-data-fakerest';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
@@ -353,6 +354,22 @@ export const CreateLabel = () => (
     </Wrapper>
 );
 
+export const CreateLabelRendered = () => (
+    <Wrapper>
+        <SelectArrayInput
+            source="roles"
+            choices={choices}
+            defaultValue={['u001', 'u003']}
+            create={<CreateRole />}
+            createLabel={
+                <Typography data-testid="new-role-label">
+                    Create a new <strong>role</strong>
+                </Typography>
+            }
+        />
+    </Wrapper>
+);
+
 export const DifferentIdTypes = () => {
     const fakeData = {
         bands: [{ id: 1, name: 'band_1', members: [1, '2'] }],
diff --git a/packages/ra-ui-materialui/src/input/SelectInput.spec.tsx b/packages/ra-ui-materialui/src/input/SelectInput.spec.tsx
@@ -20,6 +20,7 @@ import {
     TranslateChoice,
     FetchChoices,
     CreateLabel,
+    CreateLabelRendered,
 } from './SelectInput.stories';
 
 describe('<SelectInput />', () => {
@@ -731,6 +732,20 @@ describe('<SelectInput />', () => {
             promptSpy.mockRestore();
         });
 
+        it('should support using a custom rendered createLabel', async () => {
+            render(<CreateLabelRendered />);
+            const input = (await screen.findByLabelText(
+                'Category'
+            )) as HTMLInputElement;
+            fireEvent.mouseDown(input);
+            // Expect the custom create label to be displayed
+            const newCategoryLabel =
+                await screen.findByTestId('new-category-label');
+            expect(newCategoryLabel.textContent).toBe('Create a new category');
+            fireEvent.click(newCategoryLabel);
+            await screen.findByText('New category name');
+        });
+
         it('should support using a custom createLabel with optionText being a string', async () => {
             const promptSpy = jest.spyOn(window, 'prompt');
             promptSpy.mockImplementation(jest.fn(() => 'New Category'));
diff --git a/packages/ra-ui-materialui/src/input/SelectInput.stories.tsx b/packages/ra-ui-materialui/src/input/SelectInput.stories.tsx
@@ -7,6 +7,7 @@ import {
     DialogTitle,
     IconButton,
     TextField,
+    Typography,
 } from '@mui/material';
 import {
     CreateBase,
@@ -410,6 +411,21 @@ CreateLabel.argTypes = {
     },
 };
 
+export const CreateLabelRendered = () => (
+    <Wrapper>
+        <SelectInput
+            createLabel={
+                <Typography data-testid="new-category-label">
+                    Create a new <strong>category</strong>
+                </Typography>
+            }
+            create={<CreateCategory />}
+            source="category"
+            choices={categories}
+        />
+    </Wrapper>
+);
+
 const i18nProvider = polyglotI18nProvider(() => englishMessages);
 
 const Wrapper = ({ children, onSuccess = console.log, name = 'gender' }) => (
diff --git a/packages/ra-ui-materialui/src/input/common.tsx b/packages/ra-ui-materialui/src/input/common.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useWatch } from 'react-hook-form';
+import { DataProvider } from 'ra-core';
 
 export const FormInspector = ({ name = 'title' }) => {
     const value = useWatch({ name });
@@ -12,3 +13,21 @@ export const FormInspector = ({ name = 'title' }) => {
         </div>
     );
 };
+
+export const delayedDataProvider = (
+    dataProvider: DataProvider,
+    delay = process.env.NODE_ENV === 'test' ? 100 : 300
+) =>
+    new Proxy(dataProvider, {
+        get: (target, name) => (resource, params) => {
+            if (typeof name === 'symbol' || name === 'then') {
+                return;
+            }
+            return new Promise(resolve =>
+                setTimeout(
+                    () => resolve(dataProvider[name](resource, params)),
+                    delay
+                )
+            );
+        },
+    });
diff --git a/packages/ra-ui-materialui/src/input/useSupportCreateSuggestion.tsx b/packages/ra-ui-materialui/src/input/useSupportCreateSuggestion.tsx
