diff --git a/docs/AutocompleteInput.md b/docs/AutocompleteInput.md index 581b0cb7646..23c1ccfe1c5 100644 --- a/docs/AutocompleteInput.md +++ b/docs/AutocompleteInput.md @@ -28,7 +28,6 @@ import { AutocompleteInput } from 'react-admin'; |---------------------------|----------|-----------------------------------------------|-----------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `choices` | Required | `Object[]` | `-` | List of items to autosuggest | | `create` | Optional | `Element` | `-` | A React Element to render when users want to create a new choice | -| `createLabel` | Optional | `string` | `ra.action.create` | The label for the menu item allowing users to create a new choice. Used when the filter is empty | | `createItemLabel` | Optional | `string` | `ra.action.create_item` | The label for the menu item allowing users to create a new choice. Used when the filter is not empty | | `emptyValue` | Optional | `any` | `''` | The value to use for the empty element | | `emptyText` | Optional | `string` | `''` | The text to use for the empty element | @@ -156,9 +155,9 @@ const PostCreate = () => { { - const newCategoryName = prompt('Enter a new category'); - const newCategory = { id: newCategoryName.toLowerCase(), name: newCategoryName }; + onCreate={(filter) => { + const newCategoryName = window.prompt('Enter a new category', filter); + const newCategory = { id: categories.length + 1, name: newCategoryName }; categories.push(newCategory); return newCategory; }} @@ -254,6 +253,41 @@ const CreateCategory = () => { ``` {% endraw %} +**Tip:** As showcased in this example, react-admin provides a convenience hook for accessing the filter the user has already input in the ``: `useCreateSuggestionContext`. + +The `Create %{item}` option will only be displayed once the user has already set a filter (by typing in some input). If you expect your users to create new items often, you can make this more user friendly by adding a placeholder text like this: + +{% raw %} +```diff +const PostCreate = () => { + const categories = [ + { name: 'Tech', id: 'tech' }, + { name: 'Lifestyle', id: 'lifestyle' }, + ]; + return ( + + + + { + const newCategoryName = window.prompt('Enter a new category', filter); + const newCategory = { id: categories.length + 1, name: newCategoryName }; + categories.push(newCategory); + return newCategory; + }} + source="category" + choices={categories} ++ TextFieldProps={{ ++ placeholder: 'Start typing to create a new item', ++ }} + /> + + + ); +} +``` +{% endraw %} + ## `sx`: CSS API This component doesn't apply any custom styles on top of [MUI `` component](https://mui.com/components/autocomplete/). Refer to their documentation to know its CSS API. diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx index 1bb8e24b0b8..658767421b6 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx @@ -235,6 +235,9 @@ const BookEditWithCreationSupport = () => ( } }} fullWidth + TextFieldProps={{ + placeholder: 'Start typing to create a new item', + }} />