Describe the bug
The MultiSelect component throws a console error when a text value is entered in its input and the component is used as a part of the Native Form.
The issue is replicable only when a text is entered in the component's input. Everything works as expected if a value is selected from the MultiSelect's popup list.
- A possible workaround for the bug is demonstrated in this StackBlitz project.
To Reproduce
- Open this StackBlitz example
- Enter random text in the MultiSelect's input
- Open the browser's console and see the following error
Expected behavior
No errors should appear in the browser's console when using the MultiSelect component as a part of the Form component, no matter the specific configuration of the MultiSelect.
In some scenarios, we need to display the selected MultiSelect values as comma-separated values and not as chips.
Currently, the displaying of comma-separated values can be achieved using a custom template similar to this one but providing a property that can configure this behavior out of the box will be a very useful improvement in the component.
It appears the taglist always requires a selected tag to be present in the dataItems. However this tag is not gonna be present in the dataItems when a filter is applied. It seems this causes an error, where the taglist tag expects to be able to find its corresponding dataItem in the dataItems
Repro:
- Open stackblitz and select 'large'
- filter on 'L'
- observe no runtime error in console
- remove 'L' filter and replace it with 'M'
- see a runtime error in the console
https://stackblitz.com/edit/z7ejuk?file=src%2Fmain.vue
I know a quick workaround for this is to ensure a selected tag is always added to the filtered dataItems, preventing the error. But are there perhaps other workarounds or is this something that can be fixed in a future release?
Thanks in advance
