I have a problem When filtering by a specific filter criteria, the cards that match that filter are displaying, but once I open a specific card of them and close it, all the cards display and not only the ones are filtered on, it is like if the filter gets reset or cleared. please is there anything wrong that make this issue occurring?

this is the code for the filter component:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Field } from 'app/modules/user-interface/user-interface.store';
import moment from 'moment';
import { BoardStore } from '../board.store';
@Component({
  selector: 'board-header',
  templateUrl: './header.component.html',
})
export class HeaderComponent implements OnInit {
  @Input()
  board: any;
  @Input()
  viewMode: string;
  @Input()
  fields: Field[] = [];
  @Output()
  updateViewMode: EventEmitter<string> = new EventEmitter<string>();
  @Output()
  updateListSize: EventEmitter<string> = new EventEmitter<string>();
  @Output()
  updateSearchTerm: EventEmitter<string> = new EventEmitter<string>();
  @Output()
  updateListFilter: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Output()
  updateListColumns: EventEmitter<string[]> = new EventEmitter<string[]>();

  boardSection: any;

  constructor(private readonly _boardStore: BoardStore) {}

  searchTerm: string = '';
  listSize: string | null = null;
  listFilter = false;
  listColumns = ['owner', 'status', 'date'];

  filterCriteria = {
    idMembers: [] as any[],
    idSections: [] as any[],
    selectedStartDate: 'any_date',
    selectedEndDate: 'any_date',
    selectedPriority: [] as any[],
    idResponsable: [] as any[],
    idTags: [] as any[],
    resetAll: false, // to do
  };
  /**
   * On init
   */
  ngOnInit(): void {
    this.boardSection = this.board.section;
    this.loadListSize();

    // height of filter sidemenu
    const element = document.querySelector('.side-filter-panel');
    const maxHeight =
      window.innerHeight -
      7 * parseFloat(getComputedStyle(document.documentElement).fontSize);
    if (element) {
      (element as HTMLElement).style.maxHeight = `${maxHeight}px`;
      (element as HTMLElement).style.top = `${7}rem`;
    }
  }

  private loadListSize(): void {
    const storedValue = localStorage.getItem('listSize');
    if (storedValue) {
      try {
        this.listSize = JSON.parse(storedValue);
      } catch (error) {
        this.listSize = '';
      }
    } else {
      this.listSize = '';
    }
  }

  changeViewMode(viewMode: 'kanban' | 'list' | 'dashboard'): void {
    this.updateViewMode.next(viewMode);
  }

  changeListSize(listSize: 'p-datatable-sm' | '' | 'p-datatable-lg'): void {
    localStorage.setItem('listSize', JSON.stringify(listSize));
    this.updateListSize.next(listSize);
    this.listSize = listSize;
  }

  changeListFilter(listFilter: boolean): void {
    this.updateListFilter.next(listFilter);
    this.listFilter = listFilter;
  }

  onChangeFilters(event: any, field: string): void {
    if (field === 'owner') {
      if (event.target.checked) {
        this.filterCriteria.idResponsable.push(event.target.value);
      } else {
        this.filterCriteria.idResponsable =
          this.filterCriteria.idResponsable.filter(
            value => value !== event.target.value
          );
      }
    }
    if (field === 'priority') {
      if (event.target.checked) {
        this.filterCriteria.selectedPriority.push(event.target.value);
      } else {
        this.filterCriteria.selectedPriority =
          this.filterCriteria.selectedPriority.filter(
            value => value !== event.target.value
          );
      }
    }
    if (field === 'section') {
      if (event.target.checked) {
        this.filterCriteria.idSections.push(event.target.value);
      } else {
        this.filterCriteria.idSections = this.filterCriteria.idSections.filter(
          value => value !== event.target.value
        );
      }
    }
    if (field === 'tags') {
      if (event.target.checked) {
        this.filterCriteria.idTags.push(event.target.value);
      } else {
        this.filterCriteria.idTags = this.filterCriteria.idTags.filter(
          value => value !== event.target.value
        );
      }
    }
    if (field === 'members') {
      if (event.target.checked) {
        this.filterCriteria.idMembers.push(event.target.value);
      } else {
        this.filterCriteria.idMembers = this.filterCriteria.idMembers.filter(
          value => value !== event.target.value
        );
      }
    }
    this.filtersCard();
  }

  filtersCard(): void {
    this.board.section = this.board.section.map(section => {
      return {
        ...section,
        card: section.card.map(card => {
          const priorityMatch =
            this.filterCriteria.selectedPriority.length === 0 ||
            this.filterCriteria.selectedPriority.includes(card?.priority);
          const ownerMatch =
            this.filterCriteria.idResponsable.length === 0 ||
            this.filterCriteria.idResponsable.includes(
              card?.responsible[0]?.id
            );
          const sectionMatch =
            this.filterCriteria.idSections.length === 0 ||
            this.filterCriteria.idSections.includes(section?.id);
          const tagsMatch =
            this.filterCriteria.idTags.length === 0 ||
            this.filterCriteria.idTags.every(tag =>
              card.tag.map(t => t.id).includes(tag)
            );
          const membersMatch =
            this.filterCriteria.idMembers.length === 0 ||
            this.filterCriteria.idMembers.every(member =>
              card.members.map(m => m.id).includes(member)
            );
          const startDateMatch =
            this.filterCriteria.selectedStartDate === 'any_date' ||
            this.isStartDateMatch(card.startDate);
          const endDateMatch =
            this.filterCriteria.selectedEndDate === 'any_date' ||
            this.isEndDateMatch(card.endDate);

          return {
            ...card,
            isHidden: !(
              priorityMatch &&
              ownerMatch &&
              sectionMatch &&
              tagsMatch &&
              membersMatch &&
              startDateMatch &&
              endDateMatch
            ),
          };
        }),
      };
    });
this._boardStore.changeBoardState(this.board);
  }

  apparenceChanged(event: Event, field: string): void {
    event.stopPropagation();
    if (this.listColumns.includes(field)) {
      this.listColumns = this.listColumns.filter(item => item !== field);
    } else {
      this.listColumns.push(field);
    }
    this.updateListColumns.next(this.listColumns);
  }

  clearFilters(): void {
    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
      (checkbox as HTMLInputElement).checked = false;
    });

    this.filterCriteria.selectedStartDate = 'any_date';
    this.filterCriteria.selectedEndDate = 'any_date';
    this.board.section = this.board.section.map(section => {
      return {
        ...section,
        card: section.card.map(card => {
          return {
            ...card,
            isHidden: false,
          };
        }),
      };
    });
    this._boardStore.changeBoardState(this.board);
  }
}

and this is the functions of the store:

readonly changeBoardState = this.effect((board$: Observable<any>) => {
    return board$.pipe(
      tap(board => {
        this.updateBoard(board);
      })
    );
  });   
readonly updateBoard = this.updater((state, board: any) => ({
    ...state,
    board: {
      ...state.board,
      section: board.section,
    },
  }));`