[w-autocomplete] Multiple Selection Bug

[DerrikMilligan]

The problem

Here is a codepen demonstrating this issue.

If you select Wave 2 or Wave 3 from the autocomplete you'll notice that Wave has been removed from the list of options to use.

This happens because currently filteredItems removes currently selected items from the list of items by joining together a string of all the searchable fields of items and then doing an includes check.

Here is the codeblock where that logic currently lives:

const selection = this.normalizedSelection.join(',') // Optimized string of coma separated words.
const isItemNotSelected = item => !selection.includes(item.searchable)

The problem is that because the Wave searchable string is technically a substring of both Wave 2 and Wave 3's searchable strings then it appears to have already been selected, when in reality is hasn't.

The solution

Track selected items by UID instead. We already are associating a UID with each item and they're available for the selection. So we can avoid the string checks and joins altogether, at least for this selected check.

[antoniandre]

Of course, another mystery solved by Derrick! 🚀