fix(TreeSelect): prevent event propagation when clicking overlay

[KumJungMin]

Defect Fixes

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

How to resolve

Cause

• In "appendTo: self" mode, clicking the overlay expand icon causes the overlay to close unexpectedly.
• This happens because clicking the expand icon triggers the onClick event of the container ref.

Resolved

• I have prevented event propagation when clicking the overlay in "appendTo: self" mode.

<TSTree
  @click.stop  // added
 ... 
/>

Test

sample code

<template>
  <div class="card flex justify-center">
      <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" append-to="self" />
  </div>
</template>

<script>
import { NodeService } from '/service/NodeService';

export default {
  data() {
      return {
          nodes: null,
          selectedValue: null
      };
  },
  mounted() {
      NodeService.getTreeNodes().then((data) => (this.nodes = data));
  }
};
</script>

Before: when clicking expand or collapse icon, the overlay is closed :(

2024-11-10.6.46.57.mov

After: when clicking expand or collapse icon, the overlay is not closed :)

2024-11-10.6.46.12.mov

[vercel]

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

2 Skipped Deployments

Name	Status	Preview	Updated (UTC)
primevue	⬜️ Ignored (Inspect)	Visit Preview	Nov 10, 2024 9:51am
primevue-v3	⬜️ Ignored (Inspect)	Visit Preview	Nov 10, 2024 9:51am