Merge pull request marmelab#10288 from marmelab/fix-AutocompleteInput-create-option-with-createLabel

Fix `<AutocompleteInput>` displays 'Create' option for choices that already exist when `createLabel` is provided

Author: djhi

packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx

@@ -27,6 +27,7 @@ import {
     WithInputProps,
     OnCreate,
     OnCreateSlow,
+    CreateLabel,
 } from './AutocompleteInput.stories';
 import { ReferenceArrayInput } from './ReferenceArrayInput';
 import { AutocompleteArrayInput } from './AutocompleteArrayInput';
@@ -1168,7 +1169,7 @@ describe('<AutocompleteInput />', () => {
     });
 
     describe('onCreate', () => {
-        it("shouldn't include an option with the createLabel when the input is empty", async () => {
+        it("shouldn't include an option with the create label when the input is empty", async () => {
             const choices = [
                 { id: 'ang', name: 'Angular' },
                 { id: 'rea', name: 'React' },
@@ -1213,41 +1214,11 @@ describe('<AutocompleteInput />', () => {
             expect(screen.queryByText('ra.action.create_item')).toBeNull();
         });
         it('should include an option with the custom createLabel when the input is empty', async () => {
-            const choices = [
-                { id: 'ang', name: 'Angular' },
-                { id: 'rea', name: 'React' },
-            ];
-            const handleCreate = filter => {
-                const newChoice = {
-                    id: 'js_fatigue',
-                    name: filter,
-                };
-                choices.push(newChoice);
-                return newChoice;
-            };
+            render(<CreateLabel />);
 
-            render(
-                <AdminContext dataProvider={testDataProvider()}>
-                    <ResourceContextProvider value="posts">
-                        <SimpleForm
-                            mode="onBlur"
-                            onSubmit={jest.fn()}
-                            defaultValues={{ language: 'ang' }}
-                        >
-                            <AutocompleteInput
-                                source="language"
-                                choices={choices}
-                                onCreate={handleCreate}
-                                createLabel="Start typing to create a new item"
-                            />
-                        </SimpleForm>
-                    </ResourceContextProvider>
-                </AdminContext>
-            );
-
-            const input = screen.getByLabelText(
-                'resources.posts.fields.language'
-            ) as HTMLInputElement;
+            const input = (await screen.findByLabelText(
+                'Author'
+            )) as HTMLInputElement;
             input.focus();
             fireEvent.change(input, {
                 target: { value: '' },
@@ -1256,8 +1227,36 @@ describe('<AutocompleteInput />', () => {
             expect(
                 screen.queryByText('Start typing to create a new item')
             ).not.toBeNull();
-            expect(screen.queryByText('ra.action.create')).toBeNull();
-            expect(screen.queryByText('ra.action.create_item')).toBeNull();
+            expect(screen.queryByText(/Create/)).toBeNull();
+        });
+        it('should not show the create option when a choice is selected when using a custom createLabel', async () => {
+            render(<CreateLabel />);
+
+            const input = (await screen.findByLabelText(
+                'Author'
+            )) as HTMLInputElement;
+            input.focus();
+
+            // First, clear the input
+            fireEvent.change(input, {
+                target: { value: '' },
+            });
+            // We expect only the 'Start typing to create a new item' option
+            await screen.findByText('Victor Hugo');
+            expect(
+                screen.queryByText('Start typing to create a new item')
+            ).not.toBeNull();
+            expect(screen.queryByText(/Create/)).toBeNull();
+
+            // Then, change the input to an existing value
+            fireEvent.click(screen.getByText('Leo Tolstoy'));
+            fireEvent.focus(input);
+            // We expect all create labels not to render
+            await screen.findByText('Victor Hugo');
+            expect(
+                screen.queryByText('Start typing to create a new item')
+            ).toBeNull();
+            expect(screen.queryByText(/Create/)).toBeNull();
         });
         it('should include an option with the createItemLabel when the input not empty', async () => {
             const choices = [

packages/ra-ui-materialui/src/input/AutocompleteInput.tsx

@@ -519,7 +519,7 @@ If you provided a React element for the optionText prop, you must also provide t
         // add create option if necessary
         const { inputValue } = params;
         if (onCreate || create) {
-            if (inputValue === '' && createLabel) {
+            if (inputValue === '' && filterValue === '' && createLabel) {
                 // create option with createLabel
                 filteredOptions = filteredOptions.concat(getCreateItem(''));
             } else if (!doesQueryMatchSuggestion(filterValue)) {