How to add to multi select input's selected list? (error)

[raelyn]

Hi! I have an input multiselect element and I am trying to give users the option to add a new option to the multi select input list by filling in the blank and clicking on the “add” button (the default way to add tags is not very intuitive so I wanted to make it more obvious):

The input multi select element is binded to a collection. (in the screenshot above, collection has 2 items before attempting to add a new one)

How do I configure the “add” button’s workflow such that when users click on “add”, whatever they typed into the blank is saved to the collection back-end AND becomes a selected option automatically?

My current button workflow when someone clicks on “add”:
Action 1: POST and save whatever is typed in the blank to the collection backend
Action 2: Add result from action 1 to the end of the “input-multiselect - current selection” variable
Action 3: Refetch the collection

Action 1 screenshot:

Action 2 screenshot:

However, when I click on “add” right now, my new tag does not show up in the selected tags. (supposed to have 3 options shown after adding, but there is only 2 still).

The “input-multiselect - current selection” variable input has 3 ids shown though, but the 3rd one is not showing up in the selected tags.

And then when I click on the dropdown list, I see the new option I just added (still not selected correctly), but it is duplicated:

In the database, it is not duplicated though. So it was saved correctly to my database. But it is now showing up correctly in Weweb.

Help I must be doing something incorrectly OR there is a bug where the selected tags is not being updated when the corresponding variable is not being updated…

[aurelie]

Have you activated the “Allow to create option” on the multiselect?
I think what is happening is that you change the variable value before the collections (and the options) are updated, so the component create something from the input (and that’s why you have a duplicate)

Can you try to Disable the Allow to create option ?

[Alexis]

You should try to fetch your collection before updating the current selection. Sometime the multiselect can be tricky, its better to have the new option already in the multiselect option list before using it in the variable.

I think the option is duplicated here because you’re first updating the multiselect value with a value not present in the options so the component add it as a custom option, then you’re fetching your collection used in the options and the new option appear as a regular option but the custom one is still here.

So better to fetch the collection first, then update the multiselect value, so it should correctly link the added value and the new option.

Edit : And as Aurélie said, you can disable the allow to create option on the multiselect if you’re building an external way to add an option

[mauromequelussi]

It would be interesting to implement the debounce option in this component as well, because I want to write directly to the database when it is changed, but it needs a delay as in the input.