Skip to content

fix(datatable): fix filter overlay closing when interacting with nested overlay components#8566

Open
VaishnaviD5900 wants to merge 1 commit intoprimefaces:masterfrom
VaishnaviD5900:fix/datatable-multiselect-filter-overlay
Open

fix(datatable): fix filter overlay closing when interacting with nested overlay components#8566
VaishnaviD5900 wants to merge 1 commit intoprimefaces:masterfrom
VaishnaviD5900:fix/datatable-multiselect-filter-overlay

Conversation

@VaishnaviD5900
Copy link
Copy Markdown

Description

When using components like MultiSelect, Select, or TreeSelect as custom
filters inside a DataTable column, the filter overlay panel closed
immediately upon interacting with any option.

Root Cause

The isOutsideClicked method in ColumnFilter only checked if the
clicked target was inside this.overlay. However, nested overlay panels
(like MultiSelect dropdown) are appended to the body by default, so they
exist outside this.overlay in the DOM, causing them to be incorrectly
treated as outside clicks.

Additionally, the overlayEventListener had a condition that prevented
selfClick from being set correctly for nested overlays.

Fix

  • Simplified overlayEventListener to always set selfClick = true
    when any overlay-click event is received
  • Updated isOutsideClicked to check if the target is inside any active
    overlay panel using closest('[data-pc-section="panel"], [data-pc-section="overlay"]')

How to Test

  1. Go to /datatable/#advanced_filter
  2. Click the filter icon on the "Agent" column
  3. Click any option in the MultiSelect, checkbox should toggle and
    panel should stay open
  4. Also verify clicking outside still correctly closes the panel

Closes

Closes #8537
Closes #8213

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

DataTable: MultiSelect filter overlay closes immediately when selecting an option <TreeSelect> As a filter component in <DataTable> select bug

1 participant