I have been working on creating a multi-select dropdown component that offers manual filtering. Initially, the component displays items by looping through an array of objects:
items = [
{name: "Jake", city: "Phoenix", state: "AZ", code: 43434},
{name: "Lily", city: "Denver", state: "CO", code: 32323}
]
When a user selects a customer from the dropdown without applying any filters, the object in the console looks like this:
Object {name: "Jake", city: "Phoenix", state: "AZ", code: 43434, $$hashkey: "object 71"}
Once the manual filter is applied, allowing users to filter items by typing text, the filtered results need to be passed outside the component. For example, typing "L" in the input field would filter the list to show only "Lily". The resulting array called 'matches' would then only include "Lily".
var matches = [];
for (var i = 0; i < unfilteredItems.length; i++) {
//apply the filter
}
//update the items based on user input
$scope.items = matches;
Then, the filtered items are passed back into the component like this:
<dropdown-select items="items"></dropdown-select>
Initially, the component displays the original array of items, but as the user filters, the displayed items are updated. However, I am facing an issue where if a user selects a filtered item and then the dropdown reopens to show all items, the selection logic fails to recognize the previously selected item as the same. This is because the $$hashKey changes when a new array reference is created due to filtering.
How can I ensure that the selected and filtered items are considered the same in the dropdown component?
Thank you.