From 9705dacedba257b29a9228f5ff74c8c274efb823 Mon Sep 17 00:00:00 2001
From: Cindy M <cindy@marmelab.com>
Date: Thu, 24 Apr 2025 15:47:52 +0200
Subject: [PATCH 1/5] [Doc] improve AutocompleteInput create example

---
 docs/AutocompleteInput.md                     |  82 +++++++-------
 .../src/input/AutocompleteInput.stories.tsx   | 104 ++++++++----------
 2 files changed, 91 insertions(+), 95 deletions(-)

diff --git a/docs/AutocompleteInput.md b/docs/AutocompleteInput.md
index 133cfefc1c2..00d81a1e9cd 100644
--- a/docs/AutocompleteInput.md
+++ b/docs/AutocompleteInput.md
@@ -153,65 +153,71 @@ To allow users to add new options, pass a React element as the `create` prop. `<
 
 {% raw %}
 ```jsx
-import { CreateCategory } from './CreateCategory';
+import { CreateAuthor } from './CreateAuthor';
 
-const PostCreate = () => (
+const BookCreate = () => (
     <Create>
         <SimpleForm>
-            <TextInput source="title" />
-            <ReferenceInput source="category_id" reference="categories">
-                <AutocompleteInput create={<CreateCategory />} />
+            <ReferenceInput reference="authors" source="author">
+                <AutocompleteInput
+                    create={<CreateAuthor />}
+                    optionText="name"
+                />
             </ReferenceInput>
         </SimpleForm>
     </Create>
 );
 
-// in ./CreateCategory.js
+// in ./CreateAuthor.js
 import React from 'react';
-import { useCreate, useCreateSuggestionContext } from 'react-admin';
+import { CreateBase, SimpleForm, TextInput, useCreateSuggestionContext } from 'react-admin';
+import CloseIcon from '@mui/icons-material/Close';
 import {
     Button,
     Dialog,
-    DialogActions,
     DialogContent,
-    TextField,
+    DialogTitle,
+    IconButton,
 } from '@mui/material';
 
-const CreateCategory = () => {
+const CreateAuthor = () => {
     const { filter, onCancel, onCreate } = useCreateSuggestionContext();
-    const [create] = useCreate();
-    const [value, setValue] = React.useState(filter || '');
 
-    const handleSubmit = event => {
-        event.preventDefault();
-        create(
-          'categories',
-          { data: { title: value } },
-          {
-              onSuccess: (data) => {
-                  setValue('');
-                  onCreate(data);
-              },
-          }
-        );
+    const onAuthorCreate = author => {
+        onCreate(author);
     };
 
     return (
         <Dialog open onClose={onCancel}>
-            <form onSubmit={handleSubmit}>
-                <DialogContent>
-                    <TextField
-                        label="New category name"
-                        value={value}
-                        onChange={event => setValue(event.target.value)}
-                        autoFocus
-                    />
-                </DialogContent>
-                <DialogActions>
-                    <Button type="submit">Save</Button>
-                    <Button onClick={onCancel}>Cancel</Button>
-                </DialogActions>
-            </form>
+            <DialogTitle sx={{ m: 0, p: 2 }}>Create Author</DialogTitle>
+            <IconButton
+                aria-label="close"
+                onClick={onCancel}
+                sx={theme => ({
+                    position: 'absolute',
+                    right: 8,
+                    top: 8,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+            </IconButton>
+            <DialogContent sx={{ p: 0 }}>
+                <CreateBase
+                    redirect={false}
+                    resource="author"
+                    mutationOptions={{
+                        onSuccess: author => {
+                            onAuthorCreate(author);
+                        },
+                    }}
+                >
+                    <SimpleForm defaultValues={{ name: filter }}>
+                        <TextInput source="name" helperText={false} />
+                        <TextInput source="language" helperText={false} />
+                    </SimpleForm>
+                </CreateBase>
+            </DialogContent>
         </Dialog>
     );
 };
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
index 72085d80dba..82ddaa90faf 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
@@ -2,41 +2,45 @@ import * as React from 'react';
 import { Admin, AdminContext } from 'react-admin';
 
 import {
+    CreateBase,
+    ListBase,
+    RecordContextProvider,
     Resource,
+    TestMemoryRouter,
     required,
     useCreate,
-    useRecordContext,
-    ListBase,
     useListContext,
-    RecordContextProvider,
-    TestMemoryRouter,
+    useRecordContext,
 } from 'ra-core';
 
+import AttributionIcon from '@mui/icons-material/Attribution';
+import CloseIcon from '@mui/icons-material/Close';
+import ExpandCircleDownIcon from '@mui/icons-material/ExpandCircleDown';
 import {
+    Box,
+    Button,
     Dialog,
-    DialogContent,
     DialogActions,
-    Button,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    InputAdornment,
     Stack,
     TextField,
     Typography,
-    Box,
-    InputAdornment,
 } from '@mui/material';
-import { useFormContext } from 'react-hook-form';
 import fakeRestProvider from 'ra-data-fakerest';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
-import ExpandCircleDownIcon from '@mui/icons-material/ExpandCircleDown';
-import AttributionIcon from '@mui/icons-material/Attribution';
+import { useFormContext } from 'react-hook-form';
 
+import { useState } from 'react';
 import { Create, Edit } from '../detail';
 import { SimpleForm } from '../form';
 import { AutocompleteInput, AutocompleteInputProps } from './AutocompleteInput';
 import { ReferenceInput } from './ReferenceInput';
 import { TextInput } from './TextInput';
 import { useCreateSuggestionContext } from './useSupportCreateSuggestion';
-import { useState } from 'react';
 
 export default { title: 'ra-ui-materialui/input/AutocompleteInput' };
 
@@ -826,56 +830,42 @@ export const InsideReferenceInputWithError = () => (
 
 const CreateAuthor = () => {
     const { filter, onCancel, onCreate } = useCreateSuggestionContext();
-    const [name, setName] = React.useState(filter || '');
-    const [language, setLanguage] = React.useState('');
-    const [create] = useCreate();
 
-    const handleSubmit = event => {
-        event.preventDefault();
-        create(
-            'authors',
-            {
-                data: {
-                    name,
-                    language,
-                },
-            },
-            {
-                onSuccess: data => {
-                    setName('');
-                    setLanguage('');
-                    onCreate(data);
-                },
-            }
-        );
+    const onAuthorCreate = author => {
+        onCreate(author);
     };
 
     return (
         <Dialog open onClose={onCancel}>
-            <form onSubmit={handleSubmit}>
-                <DialogContent>
-                    <Stack gap={4}>
-                        <TextField
-                            name="name"
-                            label="The author name"
-                            value={name}
-                            onChange={event => setName(event.target.value)}
-                            autoFocus
-                        />
-                        <TextField
-                            name="language"
-                            label="The author language"
-                            value={language}
-                            onChange={event => setLanguage(event.target.value)}
-                            autoFocus
-                        />
-                    </Stack>
-                </DialogContent>
-                <DialogActions>
-                    <Button type="submit">Save</Button>
-                    <Button onClick={onCancel}>Cancel</Button>
-                </DialogActions>
-            </form>
+            <DialogTitle sx={{ m: 0, p: 2 }}>Create Author</DialogTitle>
+            <IconButton
+                aria-label="close"
+                onClick={onCancel}
+                sx={theme => ({
+                    position: 'absolute',
+                    right: 8,
+                    top: 8,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+            </IconButton>
+            <DialogContent sx={{ p: 0 }}>
+                <CreateBase
+                    redirect={false}
+                    resource="author"
+                    mutationOptions={{
+                        onSuccess: author => {
+                            onAuthorCreate(author);
+                        },
+                    }}
+                >
+                    <SimpleForm defaultValues={{ name: filter }}>
+                        <TextInput source="name" helperText={false} />
+                        <TextInput source="language" helperText={false} />
+                    </SimpleForm>
+                </CreateBase>
+            </DialogContent>
         </Dialog>
     );
 };

From 03fb04659b82eeb735a904afc8d78fd55f4fbaca Mon Sep 17 00:00:00 2001
From: Cindy M <cindy@marmelab.com>
Date: Fri, 25 Apr 2025 09:57:56 +0200
Subject: [PATCH 2/5] add autoFocus

---
 docs/AutocompleteInput.md                             |  3 +--
 .../src/input/AutocompleteInput.stories.tsx           | 11 ++++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/AutocompleteInput.md b/docs/AutocompleteInput.md
index 00d81a1e9cd..7ef936028ea 100644
--- a/docs/AutocompleteInput.md
+++ b/docs/AutocompleteInput.md
@@ -161,7 +161,6 @@ const BookCreate = () => (
             <ReferenceInput reference="authors" source="author">
                 <AutocompleteInput
                     create={<CreateAuthor />}
-                    optionText="name"
                 />
             </ReferenceInput>
         </SimpleForm>
@@ -214,7 +213,7 @@ const CreateAuthor = () => {
                 >
                     <SimpleForm defaultValues={{ name: filter }}>
                         <TextInput source="name" helperText={false} />
-                        <TextInput source="language" helperText={false} />
+                        <TextInput source="language" helperText={false} autoFocus />
                     </SimpleForm>
                 </CreateBase>
             </DialogContent>
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
index 82ddaa90faf..9a20571ce4f 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
@@ -862,7 +862,11 @@ const CreateAuthor = () => {
                 >
                     <SimpleForm defaultValues={{ name: filter }}>
                         <TextInput source="name" helperText={false} />
-                        <TextInput source="language" helperText={false} />
+                        <TextInput
+                            source="language"
+                            helperText={false}
+                            autoFocus
+                        />
                     </SimpleForm>
                 </CreateBase>
             </DialogContent>
@@ -881,10 +885,7 @@ const BookEditWithReferenceAndCreationSupport = () => (
     >
         <SimpleForm>
             <ReferenceInput reference="authors" source="author">
-                <AutocompleteInput
-                    create={<CreateAuthor />}
-                    optionText="name"
-                />
+                <AutocompleteInput create={<CreateAuthor />} />
             </ReferenceInput>
         </SimpleForm>
     </Edit>

From c92d76b9cadb4c0bf7c442375ba6eb1ad515d23c Mon Sep 17 00:00:00 2001
From: Cindy M <cindy@marmelab.com>
Date: Fri, 25 Apr 2025 09:59:56 +0200
Subject: [PATCH 3/5] remove useless tip

---
 docs/AutocompleteInput.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/AutocompleteInput.md b/docs/AutocompleteInput.md
index 7ef936028ea..5abc2868f16 100644
--- a/docs/AutocompleteInput.md
+++ b/docs/AutocompleteInput.md
@@ -51,8 +51,6 @@ The form value for the source must be the selected value, e.g.
 
 **Tip**: If you need to let users select more than one item in the list, check out the [`<AutocompleteArrayInput>`](./AutocompleteArrayInput.md) component.
 
-**Tip**: `<AutocompleteInput>` is a stateless component, so it only allows to *filter* the list of choices, not to *extend* it. If you need to populate the list of choices based on the result from a `fetch` call (and if [`<ReferenceInput>`](./ReferenceInput.md) doesn't cover your need), you'll have to [write your own Input component](./Inputs.md#writing-your-own-input-component) based on Material UI `<Autocomplete>` component.
-
 ## Props
 
 | Prop                       | Required | Type                  | Default                                                             | Description                                                                                                                                                                                                         |

From 8eed5317193edb064ac9fb1a6b746bb74bb9c5b6 Mon Sep 17 00:00:00 2001
From: Cindy M <cindy@marmelab.com>
Date: Fri, 25 Apr 2025 12:07:09 +0200
Subject: [PATCH 4/5] update Creating New Choices doc and pluralize ressource

---
 docs/AutocompleteInput.md                     | 74 +++++++++----------
 .../src/input/AutocompleteInput.stories.tsx   |  2 +-
 2 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/docs/AutocompleteInput.md b/docs/AutocompleteInput.md
index 5abc2868f16..0075daa978d 100644
--- a/docs/AutocompleteInput.md
+++ b/docs/AutocompleteInput.md
@@ -202,7 +202,7 @@ const CreateAuthor = () => {
             <DialogContent sx={{ p: 0 }}>
                 <CreateBase
                     redirect={false}
-                    resource="author"
+                    resource="authors"
                     mutationOptions={{
                         onSuccess: author => {
                             onAuthorCreate(author);
@@ -874,21 +874,22 @@ Use the `create` prop when you want a more polished or complex UI. For example a
 import {
     AutocompleteInput,
     Create,
+    CreateBase,
     ReferenceInput,
     SimpleForm,
     TextInput,
     useCreate,
-    useCreateSuggestionContext
+    useCreateSuggestionContext,
 } from 'react-admin';
 
+import CloseIcon from '@mui/icons-material/Close';
 import {
     Box,
     BoxProps,
     Button,
     Dialog,
-    DialogActions,
     DialogContent,
-    TextField,
+    IconButton,
 } from '@mui/material';
 
 const PostCreate = () => {
@@ -906,43 +907,42 @@ const PostCreate = () => {
 
 const CreateCategory = () => {
     const { filter, onCancel, onCreate } = useCreateSuggestionContext();
-    const [value, setValue] = React.useState(filter || '');
-    const [create] = useCreate();
-
-    const handleSubmit = event => {
-        event.preventDefault();
-        create(
-            'categories',
-            {
-                data: {
-                    title: value,
-                },
-            },
-            {
-                onSuccess: (data) => {
-                    setValue('');
-                    onCreate(data);
-                },
-            }
-        );
+   
+    const onCategoryCreate = category => {
+        onCreate(category);
     };
 
+
     return (
         <Dialog open onClose={onCancel}>
-            <form onSubmit={handleSubmit}>
-                <DialogContent>
-                    <TextField
-                        label="New category name"
-                        value={value}
-                        onChange={event => setValue(event.target.value)}
-                        autoFocus
-                    />
-                </DialogContent>
-                <DialogActions>
-                    <Button type="submit">Save</Button>
-                    <Button onClick={onCancel}>Cancel</Button>
-                </DialogActions>
-            </form>
+             <DialogTitle sx={{ m: 0, p: 2 }}>Create Category</DialogTitle>
+             <IconButton
+                aria-label="close"
+                onClick={onCancel}
+                sx={theme => ({
+                    position: 'absolute',
+                    right: 8,
+                    top: 8,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+                </IconButton>>
+            <DialogContent sx={{ p: 0 }}>
+                <CreateBase
+                    redirect={false}
+                    resource="categories"
+                    mutationOptions={{
+                        onSuccess: category => {
+                            onCategoryCreate(category);
+                        },
+                    }}
+                >
+                    <SimpleForm defaultValues={{ title: filter }}>
+                        <TextInput source="name" helperText={false} autoFocus/>
+                    </SimpleForm>
+                </CreateBase>
+             </DialogContent>
         </Dialog>
     );
 };
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
index 9a20571ce4f..baf2e5c2550 100644
--- a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
+++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
@@ -853,7 +853,7 @@ const CreateAuthor = () => {
             <DialogContent sx={{ p: 0 }}>
                 <CreateBase
                     redirect={false}
-                    resource="author"
+                    resource="authors"
                     mutationOptions={{
                         onSuccess: author => {
                             onAuthorCreate(author);

From 7ee0796e899e8ef36d84b860e018ee71fcbcfa7f Mon Sep 17 00:00:00 2001
From: Cindy M <cindy@marmelab.com>
Date: Fri, 25 Apr 2025 14:40:45 +0200
Subject: [PATCH 5/5] remove extra char

---
 docs/AutocompleteInput.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/AutocompleteInput.md b/docs/AutocompleteInput.md
index 0075daa978d..ee568b55701 100644
--- a/docs/AutocompleteInput.md
+++ b/docs/AutocompleteInput.md
@@ -927,7 +927,7 @@ const CreateCategory = () => {
                 })}
             >
                 <CloseIcon />
-                </IconButton>>
+            </IconButton>
             <DialogContent sx={{ p: 0 }}>
                 <CreateBase
                     redirect={false}