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.
The problem
Here is a codepen demonstrating this issue.
If you select
Wave 2
orWave 3
from the autocomplete you'll notice thatWave
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 thesearchable
fields of items and then doing anincludes
check.Here is the codeblock where that logic currently lives:
The problem is that because the
Wave
searchable string is technically asubstring
of bothWave 2
andWave 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.