Fix AutocompleteInput nested optionText with create and enableGetChoi…

…ces examples in doc
marmelab · Jan 6, 2023 · 8328931 · 8328931
1 parent d1d31e9
commit 8328931
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 5 deletions.
diff --git a/docs/ReferenceArrayInput.md b/docs/ReferenceArrayInput.md
@@ -149,7 +149,7 @@ You can make the `getList()` call lazy by using the `enableGetChoices` prop. Thi
 <ReferenceArrayInput
      source="tags_ids"
      reference="tags"
-     enableGetChoices={({ q }) => q.length >= 2}
+     enableGetChoices={({ q }) => q && q.length >= 2}
 />
 ```
 

diff --git a/docs/ReferenceInput.md b/docs/ReferenceInput.md
@@ -145,7 +145,7 @@ You can make the `getList()` call lazy by using the `enableGetChoices` prop. Thi
 <ReferenceInput
      source="company_id"
      reference="companies"
-     enableGetChoices={({ q }) => q.length >= 2}
+     enableGetChoices={({ q }) => q && q.length >= 2}
 />
 ```
 

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.tsx
@@ -806,6 +806,49 @@ describe('<AutocompleteArrayInput />', () => {
         expect(screen.getByText('Programming')).not.toBeNull();
     });
 
+    it('should use optionText with a string value including "." as text identifier when a create element is passed', () => {
+        const choices = [
+            { id: 't', foobar: { name: 'Technical' } },
+            { id: 'p', foobar: { name: 'Programming' } },
+        ];
+        const newChoice = {
+            id: 'js_fatigue',
+            foobar: { name: 'New Kid On The Block' },
+        };
+
+        const Create = () => {
+            const context = useCreateSuggestionContext();
+            const handleClick = () => {
+                choices.push(newChoice);
+                context.onCreate(newChoice);
+            };
+
+            return <button onClick={handleClick}>Get the kid</button>;
+        };
+
+        render(
+            <AdminContext dataProvider={testDataProvider()}>
+                <SimpleForm onSubmit={jest.fn()}>
+                    <AutocompleteArrayInput
+                        {...defaultProps}
+                        create={<Create />}
+                        optionText="foobar.name"
+                        choices={choices}
+                    />
+                </SimpleForm>
+            </AdminContext>
+        );
+
+        userEvent.type(
+            screen.getByLabelText('resources.posts.fields.tags'),
+            'a'
+        );
+        expect(screen.queryAllByRole('option')).toHaveLength(3);
+        expect(screen.getByText('Technical')).not.toBeNull();
+        expect(screen.getByText('Programming')).not.toBeNull();
+        expect(screen.getByText('ra.action.create_item')).not.toBeNull();
+    });
+
     it('should support creation of a new choice through the onCreate event when optionText is a function', async () => {
         const choices = [
             { id: 'ang', name: 'Angular' },

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -381,13 +381,17 @@ If you provided a React element for the optionText prop, you must also provide t
             }
 
             if (option?.id === createId) {
-                return option?.name;
+                return get(
+                    option,
+                    typeof optionText === 'string' ? optionText : 'name'
+                );
             }
 
             if (!isListItem && option[optionValue || 'id'] === emptyValue) {
-                return option[
+                return get(
+                    option,
                     typeof optionText === 'string' ? optionText : 'name'
-                ];
+                );
             }
 
             if (!isListItem && inputText !== undefined) {