Checkboxes UNCHECKING when using searchbar

I have a list with checkboxes combined with a searchbar. This is for searching contacts and selecting the ones you want to invite. The problem is, when I clear the search input, all the checks disappear, including those that were checked even before the searcher was used. Here is a simple plunk showing the issue. To reproduce, simply: (1) check a checkbox (2) input something in the searchbar (3) clear the searchbar.

Thanks,
Matt

When you remove the search query you reset the list (by calling initializeContacts) without re-setting the selected ones that are stored in the this.selectedContacts array.

Check it out, I added selected property to your contacts and when resetting the list it also resets the previous selected ones

this.contacts.forEach((contact)=> {
        this.selectedContacts.forEach((selected)=> {
            if((contact.firstName + contact.lastName) == (selected.firstName + selected.lastName)){
              contact.selected = true;
            }
        });
    });

I am sure there is a more beautiful way to do this, but haven’t got much time to make a nicer example. But you get the idea :slight_smile:

EDIT. A little bug when you unselect a user it still gets marked as selected so when you unselect a contact you need to remove it from the selectedContacts array. But I’ll leave that to you :wink:

2 Likes

Awesome, thanks man.

No problem, glad to help :slight_smile: