Skip to content

[Doc] improve AutocompleteInput create example #10696

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 25, 2025
Merged

[Doc] improve AutocompleteInput create example #10696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9705dac
[Doc] improve AutocompleteInput create example
Cimanel Apr 24, 2025
03fb046
add autoFocus
Cimanel Apr 25, 2025
c92d76b
remove useless tip
Cimanel Apr 25, 2025
8eed531
update Creating New Choices doc and pluralize ressource
Cimanel Apr 25, 2025
7ee0796
remove extra char
Cimanel Apr 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 80 additions & 77 deletions docs/AutocompleteInput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down Expand Up @@ -153,65 +151,70 @@ 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 />}
/>
</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="authors"
mutationOptions={{
onSuccess: author => {
onAuthorCreate(author);
},
}}
>
<SimpleForm defaultValues={{ name: filter }}>
<TextInput source="name" helperText={false} />
<TextInput source="language" helperText={false} autoFocus />
</SimpleForm>
</CreateBase>
</DialogContent>
</Dialog>
);
};
Expand Down Expand Up @@ -871,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 = () => {
Expand All @@ -903,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>
);
};
Expand Down
109 changes: 50 additions & 59 deletions packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' };

Expand Down Expand Up @@ -826,56 +830,46 @@ 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)}
<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="authors"
mutationOptions={{
onSuccess: author => {
onAuthorCreate(author);
},
}}
>
<SimpleForm defaultValues={{ name: filter }}>
<TextInput source="name" helperText={false} />
<TextInput
source="language"
helperText={false}
autoFocus
/>
</Stack>
</DialogContent>
<DialogActions>
<Button type="submit">Save</Button>
<Button onClick={onCancel}>Cancel</Button>
</DialogActions>
</form>
</SimpleForm>
</CreateBase>
</DialogContent>
</Dialog>
);
};
Expand All @@ -891,10 +885,7 @@ const BookEditWithReferenceAndCreationSupport = () => (
>
<SimpleForm>
<ReferenceInput reference="authors" source="author">
<AutocompleteInput
create={<CreateAuthor />}
optionText="name"
/>
<AutocompleteInput create={<CreateAuthor />} />
</ReferenceInput>
</SimpleForm>
</Edit>
Expand Down
Loading