`allowUserOptions="append"` not working as expected

[twinmoonsllc]

I have a simple case:

<MultiSelect
  bind:selected
  options={tags}
  allowUserOptions={"append"}
/>

When I enter an item that isn't in the tags list, it gives me the option to add it as expected, however, it doesn't seem to update the list itself because I can add this newly-added tag multiple times. Only when I remove the newly added tag from the selected list, then it gets added to the tags array and from then-on I can only add it once.

I also tried using the on:change option to update the tags array with a callback function, but that doesn't work either.

[janosh]

When I enter an item that isn't in the tags list, it gives me the option to add it as expected, however, it doesn't seem to update the list itself because I can add this newly-added tag multiple times.

This first part is expected behavior. Would you prefer the default was each value can only be added once?

Only when I remove the newly added tag from the selected list, then it gets added to the tags array ...

I can see how this can be confusing. The new custom option is in fact added right away. The reason it doesn't show up in the list is that the component automatically filters value from the dropdown that are already selected. So when you de-select it, it becomes visible in the dropdown.

...and from then-on I can only add it once.

I think this is not correct. You can still add it multiple times by adding the same custom text again and again, no?

Happy to hear feedback if you think any of this should be different.

[twinmoonsllc]

When I enter an item that isn't in the tags list, it gives me the option to add it as expected, however, it doesn't seem to update the list itself because I can add this newly-added tag multiple times.

This first part is expected behavior. Would you prefer the default was each value can only be added once?

Yes, I think it would make sense that it should be treated like the other options. With the other options, once you select them, they are removed from the list so you can't select them again. So I think for consistently, it makes sense that you should only be able to select a new option once also.

Only when I remove the newly added tag from the selected list, then it gets added to the tags array ...

I can see how this can be confusing. The new custom option is in fact added right away. The reason it doesn't show up in the list is that the component automatically filters value from the dropdown that are already selected. So when you de-select it, it becomes visible in the dropdown.

...and from then-on I can only add it once.

Yes, agreed. I just think it should only be added once right after creation!

I think this is not correct. You can still add it multiple times by adding the same custom text again and again, no?

Happy to hear feedback if you think any of this should be different.

BTW, thank you for this awesome component!! You've really thought of all the useful features and options.

[janosh]

I think this issue has been fixed. If I understand correctly, the main point was that users could create the same custom option multiple times. This is not the case (anymore? not sure if that was the case when this issue was created).

https://user-images.githubusercontent.com/30958850/201580482-0e826270-74d9-4899-8d86-f25085ce3f46.mp4