<TreeSelect> As a filter component in <DataTable> select bug

[edgarsn]

Describe the bug

When using <TreeSelect> within column filter, it's a bit buggy in a multiple cases causing <DataTable> filter to close unexpectedly.

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/jdk9v2di-aajs64lo?file=src%2FApp.vue

Environment

Happens in local development (Node 22 LTS, NPM 10.9.3 , Ubuntu 24 LTS) and also reproducible on Stackblitz.

Vue version

3.5.22

PrimeVue version

4.4.1

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

When clicking on the filter icon in the column header, it offers to TreeSelect, but then there are few bug cases:

1. Try expanding "Documents" and collapse it --> DataTable filter is closed.

2. Try expanding "Documents" and clicking on "Work" --> DataTable filter is closed and node is not selected.

3. Try expanding "Documents" and then expand "Work" -> DataTable filter is closed.

Expected behavior

1. It shall not close DataTable filter.
2. It shall select node.
3. It should not close DataTable filter.

[euen-u]

I had the same bug, but append-to="self" prop fixes that for TreeSelect.
Another components work good without that, so this is defenitely the bug

[joerghansen]

The same bug shows up if MultiSelect is used (instead of TreeSelect). append-to="self" fixes that, too.

BTW, I use version 4.5.5 of PrimeVue, and 3.5.32 of vue.js

This bug can be reproduced on the PrimeVue web site itself: https://primevue.org/datatable/#advanced_filter

The selection of an "Agent" (with a MultiSelect) does not work there.