Hello!
I'm using the Multiselect component and dynamically querying the database with inputValue as the user types — which works great.
However, after selecting an item from the Multiselect, and then clearing the field to search for another the previous selected value gets automatically cleared.
In large datasets, this makes it very hard to select multiple values quickly.
What I'm looking for:
I would like the Multiselect component to keep previously selected items visible while allowing the user to keep typing and searching new options — without clearing the search field after every selection.
- You type a name
- Select an item
- Keep typing in the same search box to add more
- Previously selected items remain visible or pinned.
Is there a way that I can do this? I can't seem to find a solution!
Thank you very much!
@Sergio_Toledo,
Do you mean like this? In this example, the multiselect lets you select an item, and then type in another one right next to it.
(or are you saying you are doing the searching from a different input?)
Hello linda. Not like that because it seems you are doing one search. Let's suppose you tiped M, and Monika appearead. Then you delete the M and try to search for Erwell again in a database, the Monika that you've selected goes away and only Erwell stays. I was able to fix it by allowing custom values, but the solution is not perfect because now any value can be placed in the multiselect.
Is there another way around?
@Sergio_Toledo,
Unfortunately there's no simple way to do this. One workaround would be to keep track of all your selections by creating a global variable that is an array, and push each newly selected element into it. Then you can make the source of the mapped select options a concatenation of that global array variable with the query. Here is a sample app to see how to do this:
MultipageSandbox.json (14.9 KB)
Let me know if you have any questions.
