From 1df5b678937edaa9c72582e9edeaf9607708bf4c Mon Sep 17 00:00:00 2001 From: PC0 Date: Sat, 13 Jul 2024 09:58:53 +0330 Subject: [PATCH 1/2] fixes #16020 Table: column-filter outside click does not close when it is inside a dialog component --- src/app/components/table/table.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index 31ecece2bb1..b80799fe23d 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -5133,7 +5133,7 @@ export class ReorderableRow implements AfterViewInit { [ngClass]="{ 'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': display === 'menu' }" [id]="overlayId" [attr.aria-modal]="true" - role="dialog" + role="filterDialog" (click)="onContentClick()" [@overlayAnimation]="'visible'" (@overlayAnimation.start)="onOverlayAnimationStart($event)" @@ -5788,7 +5788,7 @@ export class ColumnFilter implements AfterContentInit { const documentTarget: any = this.el ? this.el.nativeElement.ownerDocument : 'document'; this.documentClickListener = this.renderer.listen(documentTarget, 'mousedown', (event) => { - const dialogElements = document.querySelectorAll('[role="dialog"]'); + const dialogElements = document.querySelectorAll('[role="filterDialog"]'); const targetIsColumnFilterMenuButton = event.target.closest('.p-column-filter-menu-button'); if (this.overlayVisible && this.isOutsideClicked(event) && (targetIsColumnFilterMenuButton || dialogElements?.length <= 1)) { this.hide(); From 33def4ed16cf373d75d10794450cecd0f16626a6 Mon Sep 17 00:00:00 2001 From: PC0 Date: Sun, 21 Jul 2024 10:29:59 +0330 Subject: [PATCH 2/2] queried the date-picker class to fix the issue fixes #16020 without breaking the #14987 --- src/app/components/table/table.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index b80799fe23d..1163481f324 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -5133,7 +5133,7 @@ export class ReorderableRow implements AfterViewInit { [ngClass]="{ 'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': display === 'menu' }" [id]="overlayId" [attr.aria-modal]="true" - role="filterDialog" + role="dialog" (click)="onContentClick()" [@overlayAnimation]="'visible'" (@overlayAnimation.start)="onOverlayAnimationStart($event)" @@ -5788,9 +5788,10 @@ export class ColumnFilter implements AfterContentInit { const documentTarget: any = this.el ? this.el.nativeElement.ownerDocument : 'document'; this.documentClickListener = this.renderer.listen(documentTarget, 'mousedown', (event) => { - const dialogElements = document.querySelectorAll('[role="filterDialog"]'); + let isDateDialog = false; + document.querySelectorAll('[role="dialog"]').forEach(d => { if(DomHandler.hasClass(d, 'p-datepicker')) isDateDialog = true; }); const targetIsColumnFilterMenuButton = event.target.closest('.p-column-filter-menu-button'); - if (this.overlayVisible && this.isOutsideClicked(event) && (targetIsColumnFilterMenuButton || dialogElements?.length <= 1)) { + if (this.overlayVisible && this.isOutsideClicked(event) && (targetIsColumnFilterMenuButton || !isDateDialog)) { this.hide(); }