[Doc] Fix remaining <AutocompleteInput> and <SelectInput> create examples

Author: slax57

docs/AutocompleteArrayInput.md

@@ -147,65 +147,68 @@ To allow users to add new options, pass a React element as the `create` prop. `<
 
 {% raw %}
 ```jsx
-import { CreateRole } from './CreateRole';
-
-const choices = [
-    { id: 'admin', name: 'Admin' },
-    { id: 'u001', name: 'Editor' },
-    { id: 'u002', name: 'Moderator' },
-    { id: 'u003', name: 'Reviewer' },
-];
+import {
+    AutocompleteArrayInput,
+    Create,
+    CreateBase,
+    ReferenceArrayInput,
+    SimpleForm,
+    TextInput,
+    useCreateSuggestionContext
+} from 'react-admin';
+import CloseIcon from '@mui/icons-material/Close';
+import {
+    Dialog,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+} from '@mui/material';
 
 const UserCreate = () => (
     <Create>
         <SimpleForm>
-            <AutocompleteArrayInput
-                source="roles"
-                choices={choices}
-                create={<CreateRole />}
-            />
+            <ReferenceArrayInput source="roles" reference="roles">
+                <AutocompleteArrayInput create={<CreateRole />} />
+            </ReferenceArrayInput>
         </SimpleForm>
     </Create>
 );
 
-// in ./CreateRole.js
-import { useCreateSuggestionContext } from 'react-admin';
-import {
-    Button,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    TextField,
-} from '@mui/material';
-
 const CreateRole = () => {
     const { filter, onCancel, onCreate } = useCreateSuggestionContext();
-    const [value, setValue] = React.useState(filter || '');
-
-    const handleSubmit = event => {
-        event.preventDefault();
-        const newOption = { id: value, name: value };
-        choices.push(newOption);
-        setValue('');
-        onCreate(newOption);
-    };
 
     return (
         <Dialog open onClose={onCancel}>
-            <form onSubmit={handleSubmit}>
-                <DialogContent>
-                    <TextField
-                        label="Role 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 Role</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="roles"
+                    mutationOptions={{
+                        onSuccess: onCreate,
+                    }}
+                >
+                    <SimpleForm defaultValues={{ name: filter }}>
+                        <TextInput
+                            source="name"
+                            helperText={false}
+                            autoFocus
+                        />
+                    </SimpleForm>
+                </CreateBase>
+            </DialogContent>
         </Dialog>
     );
 };
@@ -718,20 +721,14 @@ import {
     ReferenceArrayInput,
     SimpleForm,
     TextInput,
-    useCreate,
     useCreateSuggestionContext
 } from 'react-admin';
-
 import CloseIcon from '@mui/icons-material/Close';
 import {
-    Box,
-    BoxProps,
-    Button,
     Dialog,
     DialogContent,
     DialogTitle,
     IconButton,
-    TextField,
 } from '@mui/material';
 
 const PostCreate = () => {
@@ -749,10 +746,6 @@ const PostCreate = () => {
 
 const CreateTag = () => {
     const { filter, onCancel, onCreate } = useCreateSuggestionContext();
-   
-    const onTagCreate = tag => {
-        onCreate(tag);
-    };
 
     return (
         <Dialog open onClose={onCancel}>
@@ -774,9 +767,7 @@ const CreateTag = () => {
                     redirect={false}
                     resource="tags"
                     mutationOptions={{
-                        onSuccess: tag => {
-                            onTagCreate(tag);
-                        },
+                        onSuccess: onCreate,
                     }}
                 >
                     <SimpleForm defaultValues={{ name: filter }}>

docs/AutocompleteInput.md

@@ -151,7 +151,22 @@ To allow users to add new options, pass a React element as the `create` prop. `<
 
 {% raw %}
 ```jsx
-import { CreateAuthor } from './CreateAuthor';
+import { 
+    Create, 
+    CreateBase, 
+    SimpleForm, 
+    ReferenceInput, 
+    AutocompleteInput, 
+    TextInput, 
+    useCreateSuggestionContext 
+} from 'react-admin';
+import CloseIcon from '@mui/icons-material/Close';
+import {
+    Dialog,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+} from '@mui/material';
 
 const BookCreate = () => (
     <Create>
@@ -165,25 +180,9 @@ const BookCreate = () => (
     </Create>
 );
 
-// in ./CreateAuthor.js
-import React from 'react';
-import { CreateBase, SimpleForm, TextInput, useCreateSuggestionContext } from 'react-admin';
-import CloseIcon from '@mui/icons-material/Close';
-import {
-    Button,
-    Dialog,
-    DialogContent,
-    DialogTitle,
-    IconButton,
-} from '@mui/material';
-
 const CreateAuthor = () => {
     const { filter, onCancel, onCreate } = useCreateSuggestionContext();
 
-    const onAuthorCreate = author => {
-        onCreate(author);
-    };
-
     return (
         <Dialog open onClose={onCancel}>
             <DialogTitle sx={{ m: 0, p: 2 }}>Create Author</DialogTitle>
@@ -204,9 +203,7 @@ const CreateAuthor = () => {
                     redirect={false}
                     resource="authors"
                     mutationOptions={{
-                        onSuccess: author => {
-                            onAuthorCreate(author);
-                        },
+                        onSuccess: onCreate,
                     }}
                 >
                     <SimpleForm defaultValues={{ name: filter }}>
@@ -878,17 +875,13 @@ import {
     ReferenceInput,
     SimpleForm,
     TextInput,
-    useCreate,
     useCreateSuggestionContext,
 } from 'react-admin';
-
 import CloseIcon from '@mui/icons-material/Close';
 import {
-    Box,
-    BoxProps,
-    Button,
     Dialog,
     DialogContent,
+    DialogTitle,
     IconButton,
 } from '@mui/material';
 
@@ -907,11 +900,6 @@ const PostCreate = () => {
 
 const CreateCategory = () => {
     const { filter, onCancel, onCreate } = useCreateSuggestionContext();
-   
-    const onCategoryCreate = category => {
-        onCreate(category);
-    };
-
 
     return (
         <Dialog open onClose={onCancel}>
@@ -933,9 +921,7 @@ const CreateCategory = () => {
                     redirect={false}
                     resource="categories"
                     mutationOptions={{
-                        onSuccess: category => {
-                            onCategoryCreate(category);
-                        },
+                        onSuccess: onCreate,
                     }}
                 >
                     <SimpleForm defaultValues={{ title: filter }}>