I have a user table that is currently filtered by groups - the users are assigned a group when they are added. I have an updateFilter function which searches by the users last name. The issue I'm currently having is when a group is selected, the users are shown, but when I search for a name and delete the searched characters for another name, the full list appears when I need it to only show and return whatever group is selected.

Search div -

<div class="col-4">
   <input
     type='text'
     class="form-control w-200px"
     placeholder='Search by Last Name...'
     (keyup)='updateFilter($event)'/>
 </div>

Filter function -

  updateFilter(event) {
    const val = event.target.value.toLowerCase();

    this.rows = this.temp.filter(function (d) {
      return d.lastName.toLowerCase().indexOf(val) !== -1 || !val;
    });

    if (this.table) {
      this.table.offset = 0;
    }
  }

Group filter -

onGroupSelected($event) {
    const groupId = $event.target ? $event.target.value : $event;
    if (groupId === 'none') {
      this.rows = this.temp;
    } else {
      const groupUsers = this.groupUserMap.get(groupId);
      if (groupUsers) {
        this.rows = this.temp.filter((serviceUser) => groupUsers.includes(serviceUser.id));
      } else {
        this.rows = [];
      }
    }
    // @ts-ignore
    this.userSelections = this.userSelections ? this.userSelections : {};
    this.userSelections.groupId = groupId;
    localForage.setItem(this.username, this.userSelections);
  }