Merge pull request marmelab#10715 from marmelab/fix-createLabel-optionText-fn

djhi · web-flow · commit e4fd5501befc · 2025-04-30T18:11:41.000+02:00
Fix `&lt;AutocompleteInput&gt;` and `&lt;SelectInput&gt;` renders undefined instead of the `createLabel` when `optionText` is a function or a `recordRepresentation` is set
diff --git a/packages/ra-core/src/form/choices/useChoices.tsx b/packages/ra-core/src/form/choices/useChoices.tsx
@@ -27,6 +27,8 @@ export interface UseChoicesOptions {
     optionText?: OptionText;
     disableValue?: string;
     translateChoice?: boolean;
+    createValue?: string;
+    createHintValue?: string;
 }
 
 /*
@@ -45,11 +47,20 @@ export const useChoices = ({
     optionValue = 'id',
     disableValue = 'disabled',
     translateChoice = true,
+    createValue = '@@ra-create',
+    createHintValue = '@@ra-create-hint',
 }: UseChoicesOptions) => {
     const translate = useTranslate();
 
     const getChoiceText = useCallback(
         choice => {
+            if (choice?.id === createValue || choice?.id === createHintValue) {
+                return get(
+                    choice,
+                    typeof optionText === 'string' ? optionText : 'name'
+                );
+            }
+
             if (isValidElement<{ record: any }>(optionText)) {
                 return (
                     <RecordContextProvider value={choice}>
@@ -68,7 +79,7 @@ export const useChoices = ({
                   ? translate(String(choiceName), { _: choiceName })
                   : String(choiceName);
         },
-        [optionText, translate, translateChoice]
+        [createHintValue, createValue, optionText, translate, translateChoice]
     );
 
     const getChoiceValue = useCallback(
diff --git a/packages/ra-core/src/form/useSuggestions.ts b/packages/ra-core/src/form/useSuggestions.ts
@@ -30,6 +30,7 @@ export const useSuggestions = ({
     choices,
     createText = 'ra.action.create',
     createValue = '@@create',
+    createHintValue = '@@ra-create-hint',
     limitChoicesToValue,
     matchSuggestion,
     optionText,
@@ -43,6 +44,8 @@ export const useSuggestions = ({
         optionText,
         optionValue,
         translateChoice,
+        createValue,
+        createHintValue,
     });
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -93,7 +96,6 @@ export interface UseSuggestionsOptions extends UseChoicesOptions {
     allowDuplicates?: boolean;
     choices?: any[];
     createText?: string;
-    createValue?: any;
     limitChoicesToValue?: boolean;
     matchSuggestion?: (
         filter: string,
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
@@ -1452,6 +1452,50 @@ describe('<AutocompleteInput />', () => {
             expect(input.value).not.toBe('Create x');
             expect(input.value).toBe('x');
         }, 10000);
+
+        it('should include an option with the custom createLabel when the input is empty and optionText is a string', async () => {
+            render(<CreateLabel optionText="full_name" />);
+            const input = (await screen.findByLabelText(
+                'Author'
+            )) as HTMLInputElement;
+            input.focus();
+            fireEvent.change(input, {
+                target: { value: '' },
+            });
+            const customCreateLabel = screen.queryByText(
+                'Start typing to create a new item'
+            );
+            expect(customCreateLabel).not.toBeNull();
+            expect(
+                (customCreateLabel as HTMLElement).getAttribute('aria-disabled')
+            ).toEqual('true');
+            expect(screen.queryByText(/Create/)).toBeNull();
+        });
+
+        it('should include an option with the custom createLabel when the input is empty and optionText is a function', async () => {
+            render(
+                <CreateLabel
+                    optionText={choice =>
+                        `${choice.first_name} ${choice.last_name}`
+                    }
+                />
+            );
+            const input = (await screen.findByLabelText(
+                'Author'
+            )) as HTMLInputElement;
+            input.focus();
+            fireEvent.change(input, {
+                target: { value: '' },
+            });
+            const customCreateLabel = screen.queryByText(
+                'Start typing to create a new item'
+            );
+            expect(customCreateLabel).not.toBeNull();
+            expect(
+                (customCreateLabel as HTMLElement).getAttribute('aria-disabled')
+            ).toEqual('true');
+            expect(screen.queryByText(/Create/)).toBeNull();
+        });
     });
     describe('create', () => {
         it('should allow the creation of a new choice', async () => {
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
@@ -258,12 +258,48 @@ export const OptionTextElement = () => (
     </Wrapper>
 );
 
-const choicesForCreationSupport = [
-    { id: 1, name: 'Leo Tolstoy' },
-    { id: 2, name: 'Victor Hugo' },
-    { id: 3, name: 'William Shakespeare' },
-    { id: 4, name: 'Charles Baudelaire' },
-    { id: 5, name: 'Marcel Proust' },
+const choicesForCreationSupport: Partial<{
+    id: number;
+    name: string;
+    full_name: string;
+    first_name: string;
+    last_name: string;
+}>[] = [
+    {
+        id: 1,
+        name: 'Leo Tolstoy',
+        full_name: 'Leo Tolstoy',
+        first_name: 'Leo',
+        last_name: 'Tolstoy',
+    },
+    {
+        id: 2,
+        name: 'Victor Hugo',
+        full_name: 'Victor Hugo',
+        first_name: 'Victor',
+        last_name: 'Hugo',
+    },
+    {
+        id: 3,
+        name: 'William Shakespeare',
+        full_name: 'William Shakespeare',
+        first_name: 'William',
+        last_name: 'Shakespeare',
+    },
+    {
+        id: 4,
+        name: 'Charles Baudelaire',
+        full_name: 'Charles Baudelaire',
+        first_name: 'Charles',
+        last_name: 'Baudelaire',
+    },
+    {
+        id: 5,
+        name: 'Marcel Proust',
+        full_name: 'Marcel Proust',
+        first_name: 'Marcel',
+        last_name: 'Proust',
+    },
 ];
 
 const OnCreateInput = () => {
@@ -450,7 +486,9 @@ export const CreateDialog = () => (
     </Wrapper>
 );
 
-const CreateLabelInput = () => {
+const CreateLabelInput = ({
+    optionText,
+}: Pick<AutocompleteInputProps, 'optionText'>) => {
     const [choices, setChoices] = useState(choicesForCreationSupport);
     return (
         <AutocompleteInput
@@ -459,25 +497,55 @@ const CreateLabelInput = () => {
             onCreate={async filter => {
                 if (!filter) return;
 
-                const newOption = {
+                const newOption: Partial<{
+                    id: number;
+                    name: string;
+                    full_name: string;
+                    first_name: string;
+                    last_name: string;
+                }> = {
                     id: choices.length + 1,
-                    name: filter,
                 };
+                if (optionText == null) {
+                    newOption.name = filter;
+                } else if (typeof optionText === 'string') {
+                    newOption[optionText] = filter;
+                } else {
+                    newOption.first_name = filter;
+                    newOption.last_name = filter;
+                }
                 setChoices(options => [...options, newOption]);
                 // Wait until next tick to give some time for React to update the state
                 await new Promise(resolve => setTimeout(resolve));
                 return newOption;
             }}
             createLabel="Start typing to create a new item"
+            optionText={optionText}
         />
     );
 };
 
-export const CreateLabel = () => (
+export const CreateLabel = ({
+    optionText,
+}: Pick<AutocompleteInputProps, 'optionText'>) => (
     <Wrapper>
-        <CreateLabelInput />
+        <CreateLabelInput optionText={optionText} />
     </Wrapper>
 );
+CreateLabel.args = {
+    optionText: undefined,
+};
+CreateLabel.argTypes = {
+    optionText: {
+        options: ['default', 'string', 'function'],
+        mapping: {
+            default: undefined,
+            string: 'full_name',
+            function: choice => `${choice.first_name} ${choice.last_name}`,
+        },
+        control: { type: 'inline-radio' },
+    },
+};
 
 const CreateItemLabelInput = () => {
     const [choices, setChoices] = useState(choicesForCreationSupport);
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -326,6 +326,8 @@ If you provided a React element for the optionText prop, you must also provide t
             optionText ??
             (isFromReference ? getRecordRepresentation : undefined),
         optionValue,
+        createValue,
+        createHintValue,
         selectedItem: selectedChoice,
         suggestionLimit,
         translateChoice: translateChoice ?? !isFromReference,
diff --git a/packages/ra-ui-materialui/src/input/SelectInput.spec.tsx b/packages/ra-ui-materialui/src/input/SelectInput.spec.tsx
@@ -697,6 +697,46 @@ describe('<SelectInput />', () => {
             });
             promptSpy.mockRestore();
         });
+
+        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'));
+            render(<CreateLabel optionText="full_name" />);
+            const input = (await screen.findByLabelText(
+                'Category'
+            )) as HTMLInputElement;
+            fireEvent.mouseDown(input);
+            // Expect the custom create label to be displayed
+            fireEvent.click(await screen.findByText('Create a new category'));
+            // Expect a prompt to have opened
+            await waitFor(() => {
+                expect(promptSpy).toHaveBeenCalled();
+            });
+            promptSpy.mockRestore();
+        });
+
+        it('should support using a custom createLabel with optionText being a function', async () => {
+            const promptSpy = jest.spyOn(window, 'prompt');
+            promptSpy.mockImplementation(jest.fn(() => 'New Category'));
+            render(
+                <CreateLabel
+                    optionText={choice =>
+                        `${choice.full_name} (${choice.language})`
+                    }
+                />
+            );
+            const input = (await screen.findByLabelText(
+                'Category'
+            )) as HTMLInputElement;
+            fireEvent.mouseDown(input);
+            // Expect the custom create label to be displayed
+            fireEvent.click(await screen.findByText('Create a new category'));
+            // Expect a prompt to have opened
+            await waitFor(() => {
+                expect(promptSpy).toHaveBeenCalled();
+            });
+            promptSpy.mockRestore();
+        });
     });
 
     it('should support creation of a new choice through the create element', async () => {
diff --git a/packages/ra-ui-materialui/src/input/SelectInput.stories.tsx b/packages/ra-ui-materialui/src/input/SelectInput.stories.tsx
@@ -13,7 +13,7 @@ import {
 
 import { Create as RaCreate, Edit } from '../detail';
 import { SimpleForm } from '../form';
-import { SelectInput } from './SelectInput';
+import { SelectInput, SelectInputProps } from './SelectInput';
 import { TextInput } from './TextInput';
 import { ReferenceInput } from './ReferenceInput';
 import { SaveButton } from '../button/SaveButton';
@@ -321,31 +321,70 @@ export const OnCreate = () => {
     );
 };
 
-export const CreateLabel = () => {
-    const categories = [
-        { name: 'Tech', id: 'tech' },
-        { name: 'Lifestyle', id: 'lifestyle' },
+export const CreateLabel = ({
+    optionText,
+}: Pick<SelectInputProps, 'optionText'>) => {
+    const categories: Partial<{
+        id: string;
+        name: string;
+        full_name: string;
+        language: string;
+    }>[] = [
+        { id: 'tech', name: 'Tech', full_name: 'Tech', language: 'en' },
+        {
+            id: 'lifestyle',
+            name: 'Lifestyle',
+            full_name: 'Lifestyle',
+            language: 'en',
+        },
     ];
     return (
         <Wrapper name="category">
             <SelectInput
                 onCreate={() => {
                     const newCategoryName = prompt('Enter a new category');
                     if (!newCategoryName) return;
-                    const newCategory = {
+                    const newCategory: Partial<{
+                        id: string;
+                        name: string;
+                        full_name: string;
+                        language: string;
+                    }> = {
                         id: newCategoryName.toLowerCase(),
-                        name: newCategoryName,
                     };
+                    if (optionText == null) {
+                        newCategory.name = newCategoryName;
+                    } else if (typeof optionText === 'string') {
+                        newCategory[optionText] = newCategoryName;
+                    } else {
+                        newCategory.full_name = newCategoryName;
+                        newCategory.language = 'fr';
+                    }
                     categories.push(newCategory);
                     return newCategory;
                 }}
                 source="category"
                 choices={categories}
                 createLabel="Create a new category"
+                optionText={optionText}
             />
         </Wrapper>
     );
 };
+CreateLabel.args = {
+    optionText: undefined,
+};
+CreateLabel.argTypes = {
+    optionText: {
+        options: ['default', 'string', 'function'],
+        mapping: {
+            default: undefined,
+            string: 'full_name',
+            function: choice => `${choice.full_name} (${choice.language})`,
+        },
+        control: { type: 'inline-radio' },
+    },
+};
 
 const i18nProvider = polyglotI18nProvider(() => englishMessages);
 
diff --git a/packages/ra-ui-materialui/src/input/SelectInput.tsx b/packages/ra-ui-materialui/src/input/SelectInput.tsx
