From 668808a9f38cc80195edcb29eef2bbfa42bd6ee2 Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Thu, 23 Dec 2021 15:45:22 -0300
Subject: [PATCH 1/2] Fix create choice optionText

---
 packages/ra-ui-materialui/src/input/SelectArrayInput.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
index d6e31cc09ba..8439ef5a77d 100644
--- a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
+++ b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
@@ -184,9 +184,11 @@ const SelectArrayInput = (props: SelectArrayInputProps) => {
                     value={getChoiceValue(choice)}
                     disabled={getDisableValue(choice)}
                 >
-                    {!!createItem && choice?.id === createItem.id
-                        ? createItem.name
-                        : renderMenuItemOption(choice)}
+                    {renderMenuItemOption(
+                        !!createItem && choice?.id === createItem.id
+                            ? createItem
+                            : choice
+                    )}
                 </MenuItem>
             ) : null;
         },

From b570204d7b8bf8c8e7325f4a5c870d1465ae944e Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Thu, 23 Dec 2021 16:19:47 -0300
Subject: [PATCH 2/2] Add test

---
 .../src/input/SelectArrayInput.spec.tsx       | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx
index 3dbf1d4ef6b..fb7ccafe325 100644
--- a/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx
@@ -390,6 +390,49 @@ describe('<SelectArrayInput />', () => {
         });
     });
 
+    it('should support creation of a new choice with nested optionText', async () => {
+        const choices = [
+            { id: 'programming', name: { en: 'Programming' } },
+            { id: 'lifestyle', name: { en: 'Lifestyle' } },
+            { id: 'photography', name: { en: 'Photography' } },
+        ];
+        const newChoice = {
+            id: 'js_fatigue',
+            name: { en: 'New Kid On The Block' },
+        };
+
+        const { getByLabelText, getByRole, getByText, queryAllByText } = render(
+            <Form
+                validateOnBlur
+                onSubmit={jest.fn()}
+                render={() => (
+                    <SelectArrayInput
+                        {...defaultProps}
+                        choices={choices}
+                        onCreate={() => {
+                            choices.push(newChoice);
+                            return newChoice;
+                        }}
+                        optionText="name.en"
+                    />
+                )}
+            />
+        );
+
+        const input = getByLabelText(
+            'resources.posts.fields.categories'
+        ) as HTMLInputElement;
+        input.focus();
+        const select = getByRole('button');
+        fireEvent.mouseDown(select);
+
+        fireEvent.click(getByText('ra.action.create'));
+        await new Promise(resolve => setTimeout(resolve));
+        input.blur();
+        // 2 because there is both the chip for the new selected item and the option (event if hidden)
+        expect(queryAllByText(newChoice.name.en).length).toEqual(2);
+    });
+
     it('should support creation of a new choice through the create element', async () => {
         const choices = [...defaultProps.choices];
         const newChoice = { id: 'js_fatigue', name: 'New Kid On The Block' };