Merge pull request #10442 from marmelab/fix-autocomplete-focus-create

[Doc] Explain `openOnFocus` in `<AutocompleteInput>` with StrictMode
marmelab · Jan 13, 2025 · 4bdf7b5 · 4bdf7b5
2 parents 0577a60 + 95fa20f
commit 4bdf7b5
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 0 deletions.
diff --git a/docs/AutocompleteArrayInput.md b/docs/AutocompleteArrayInput.md
@@ -212,6 +212,8 @@ const CreateRole = () => {
 ```
 {% endraw %}
 
+**Tip**: In development with `React.StrictMode`, you may run into an issue where the `<AutocompleteArrayInput>` menu reopens after clicking the create item when the [`openOnFocus`](https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-openOnFocus) prop is set to `true` which is the default with React-admin. If that bothers you, set the `openOnFocus` prop to `false`.
+
 If you just need to ask users for a single string to create the new option, you can use [the `onCreate` prop](#oncreate) instead.
 
 If you're in a `<ReferenceArrayInput>` or `<ReferenceManyToManyInput>`, the `handleSubmit` will need to create a new record in the related resource. Check the [Creating New Choices](#creating-new-choices) for an example. 

diff --git a/docs/AutocompleteInput.md b/docs/AutocompleteInput.md
@@ -219,6 +219,8 @@ const CreateCategory = () => {
 ```
 {% endraw %}
 
+**Tip**: In development with `React.StrictMode`, you may run into an issue where the `<AutocompleteInput>` menu reopens after clicking the create item when the [`openOnFocus`](https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-openOnFocus) prop is set to `true` which is the default with React-admin. If that bothers you, set the `openOnFocus` prop to `false`.
+
 If you want to customize the label of the "Create XXX" option, use [the `createItemLabel` prop](#createitemlabel).
 
 If you just need to ask users for a single string to create the new option, you can use [the `onCreate` prop](#oncreate) instead.

diff --git a/examples/simple/src/comments/CommentEdit.tsx b/examples/simple/src/comments/CommentEdit.tsx
@@ -151,6 +151,7 @@ const CommentEdit = props => {
                                         return title.includes(filterValue);
                                     }}
                                     optionText={<OptionRenderer />}
+                                    openOnFocus={false}
                                     inputText={inputText}
                                 />
                             </ReferenceInput>

diff --git a/examples/simple/src/posts/PostCreate.tsx b/examples/simple/src/posts/PostCreate.tsx
@@ -159,6 +159,7 @@ const PostCreate = () => {
                                 <AutocompleteInput
                                     label="User"
                                     create={<CreateUser />}
+                                    openOnFocus={false}
                                 />
                             </ReferenceInput>
                             <FormDataConsumer>

diff --git a/examples/simple/src/posts/TagReferenceInput.tsx b/examples/simple/src/posts/TagReferenceInput.tsx
@@ -46,6 +46,7 @@ const TagReferenceInput = ({
                 <AutocompleteArrayInput
                     create={<CreateTag />}
                     optionText={`name.${locale}`}
+                    openOnFocus={false}
                 />
             </ReferenceArrayInput>
             <Button