AutocompleteInput and AutocompleteArrayInput with Create when input does not exist

Viewed 749

Is there a way in react-admin to have an AutocompleteInput (or AutocompleteArrayInput) to create a choice when the choice doesn't exist?

Example: Upon creating a resource, let's say Customer, I want to tag the created customer with several tags. In my system there is already a resource Tags -> { id, name }. I need an autocomplete input where the user types, and matches from the Tag resource come in to choose. If the tag doesn't exist, then upon clicking enter, the text the user has entered should trigger a CREATE, "tags", { data: {name: <entered value> } } on the data adapter and the result should be included in the choices (preferably being chosen already)

Something like this https://jedwatson.github.io/react-select/ (scroll down to where it says Custom tag creation)

UPDATE

Maybe the functionality should be decoupled from the data adapter. Adding new feature to autocomplete could be better

The new feature could be this: Adding an onCreate event to autocomplete. The event should fire whenever the entered text doesn't match any of the choices and the user presses enter. It would be up to the user to start any side effect (run a CREATE query to the data adapter with the new text, add the created item in the choices and setting the value of the input, or adding it to the input array)

2 Answers

I had the same question a while back, got no answer then... But just now I managed to create this functionality myself, by taking the original AutocompleteArrayInput component, and making it take the dataprovider as a prop.

See https://github.com/gartner/palustris-ra-autocompletearrayinput - also published to npm.

in my case i used this component 'react select' https://react-select.com/creatable

checkout Creatable Multiselect example

an example of how the component works

in the react admin front end , u can use the form hook to check state and values and set it there on whatever u like ,in the backend and for my case i needed to add extra tags to the customTags column before creating the needed post. probably you wont need that in ur case.

Related