How to prevent click outside event from closing a filter component when interacting with a...

I'm working on an Angular application where I have a filter component that toggles its visibility based on a click outside event. This works as expected, but I have an issue when there is a calendar component inside the filter area. Interacting with the calendar (e.g., selecting dates) triggers the click outside event, causing the filter component to close.

Here's my filter component code:

...

showFilter = false;
private globalClickListener: () => void;

// List of classes to ignore during the click outside check
ignoredClasses = [
'.mat-select',
'.mat-datepicker',
'span.mat-option-text',
'span.mat-calendar-body-cell-content.mat-focus-indicator.mat-calendar-body-selected',
'button.mat-calendar-previous-button.mdc-icon-button.mat-mdc-icon-button.mat-unthemed.mat-mdc-button-base.cdk-focused.cdk-mouse-focused',
'button.mat-calendar-next-button.mdc-icon-button.mat-mdc-icon-button.mat-unthemed.mat-mdc-button-base.cdk-focused.cdk-mouse-focused',
'.mat-calendar-body-cell-content.mat-calendar-body-selected'
];

constructor(
...
filterService
.openCloseFilterEvent()
.subscribe(() => (this.showFilter = !this.showFilter));
filterService.dataFilterEvent().subscribe(() => (this.showFilter = false));
}

ngOnInit() {
this.globalClickListener = this.renderer.listen('document', 'click', (event: Event) => {
const clickedElement = event.target as HTMLElement;
const isIgnoredElement = this.ignoredClasses.some(selector => clickedElement.closest(selector));
if (!this.el.nativeElement.contains(event.target) && !isIgnoredElement) {
this.showFilter = false;
}
});
}

ngOnDestroy() {
if (this.globalClickListener) {
this.globalClickListener();
}
}

searchEmitter(event: Event) {
event.stopPropagation();
this.filterService.setPage(25, 0);
this.filterService.updateFilter(this.filter);
this.showFilter = false;
}
}


The ignoredClasses/isIgnoredElement was just one of my attempts, it didn't work and I am not sure why, perhaps because the calendar is not a direct parent or child? it is part of another pieces of components, they are not in the same .html file? I tried it because it works on another project I have.

Anyhow, anyone knows how I can make it work? or what else I could attempt?

I tried the ignoredClasses as an array and outside the array, I am not sure what else I can try

Continue reading...