TreeSelect: appendTo="self" and selectionMode="checkbox" causes panel to close on click on node arrows

[alousilva]

Describe the bug

For my particular development I need to use the appendTo="self" because the tree select component is living within a container which has a position of sticky.

However a weird behavior occurs when interacting with the panel which contains the nodes of the tree select component: clicking on the icon to expand a node or to collapse a node causes the panel to close. The same happens, sometimes, when clicking on a a checkbox of a node. Sometimes the panel closes when checking and unchecking a checkbox.

Note: this problem might potentially affect other components when used with appendTo="self"

Reproducer

https://stackblitz.com/edit/stcpmv?file=src%2FApp.vue

PrimeVue version

3.40.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Click on tree select component
2. Click on the > icon to expand a node
3. The panel with nodes is closed
4. Click again on the tree select component
5. The node is expanded

The same behavior happens when:

1. Click on the tree select component
2. Click on a checkbox to check it
3. Click on the same checkbox to uncheck it
4. The panel closes

Expected behavior

1. Click on tree select component
2. Click on the > icon to expand a node
3. The node is expanded
4. The panel with nodes stays opened

Clicking on a checkbox:

1. Click on the tree select component
2. Click on a checkbox to check it
3. The node is checked
4. The panel stays opened

[ascheffeapi]

Here is a work around.

<script setup>
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import { ref, toRefs } from "vue";
import { cloneDeep } from "lodash";

const props = defineProps({
  treeOptions: {
    type: Array,
    default: () => [],
  },
});
const { treeOptions } = toRefs(props);

const treeValue = ref({});
const treeRef = ref();

const onToggle = (node, expanded)=>{
  const expandedKeys = cloneDeep(treeRef.value.expandedKeys);
  expandedKeys[node.key] = expanded;
  treeRef.value.onNodeToggle(expandedKeys);
}

</script>
<template>
  <div>
    <TreeSelect
        ref="treeRef"
        append-to="self"
        v-model="treeValue"
        selection-mode="checkbox"
        display="chip"
        :options="treeOptions"
    >
      <template #itemtogglericon="{ expanded, node }">
        <ChevronDownIcon v-if="expanded" @click.stop="onToggle(node, false)"/>
        <ChevronRightIcon v-else @click.stop="onToggle(node, true)" />
      </template>
    </TreeSelect>
  </div>
</template>

[TheLethalGoose]

Any updates on this? Bug is still present in 3.50.0