Fixed #14987 - Table | Date Filter Closing Unexpectedly

[supersinex]

Fixes #14987

The root of this issue stems from having two distinct dialog overlays appended to the body of the DOM. In the document event listener, the check for whether or not the user has clicked outside of the overlay only applies to the singular column-filter-menu overlay. In the specific case of the datepicker, this second overlay is not considered when this check occurs, thereby rendering any event target as invalid, closing the dialog.

This fix handles the following:

• Checks for the presence of multiple divs with the "role" attribute having a value of "dialog". If the number is greater than 1, disable the default behavior of closing the column filter dialog, prioritizing the behavior of the other dialogs. This was written to handle other cases beyond just the datepicker, though this issue seems to currently only occur for the datepicker specifically.
• When the event target is a column filter menu button, then all dialogs will close. If the target is the column filter menu button for the currently active dialog, the dialogs will simply close. If it is a different column filter menu button, the currently active dialogs will close, and the new one will appear in its place.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
primeng	⬜️ Ignored (Inspect)	Visit Preview		Mar 19, 2024 8:40pm

[rosenthalj]

I have not verified if this PR is valid or not, but ...

Since the methods closest and querySelectAll could be very expensive, I would recommend a slight refactor (for efficiency) if the PR is valid:

                if (this.overlayVisible && this.isOutsideClicked(event)) {
                    if  (event.target.closest('.p-column-filter-menu-button') || document.querySelectorAll('[role="dialog"]')?.length <= 1) {
                       this.hide();
                    }
                }