TreeSelect: how to only make the leaf nodes selectable?

[Amsalegebrehana]

I am new to PrimeVue and I am using TreeSelect component. The TreeSelect works fine but I wanted to make changes to it so that only the leaf nodes are selectable not the parent nodes.

<TreeSelect v-model="selectedValue" :options="NodeData" placeholder="Select Template" class="md:w-[20rem] w-full" />

export const NodeData = [
  {
      key: 'Form to Doc',
      label: 'Form to Doc',
      data: 'Form to Doc',
      icon: 'pi  pi-inbox',
      children: [
          {
              key: 'FORM',
              label: 'FORM',
              data: 'FORM',
          },
          {
              key: 'APPLICATION FORM',
              label: 'APPLICATION FORM',
              data: 'APPLICATION FORM',
          }
      ]
  },
  {
      key: 'Table to doc',
      label: 'Table to doc',
      data: 'Table to doc',
      icon: 'pi pi-calendar',
      children: [
          { key: 'INVOICE FORM', label: 'INVOICE FORM',  data: 'INVOICE FORM' },
          { key: 'PDF FORM', label: 'PDF FORM',  data: 'PDF FORM' },
         ]
  }];

I want only the children to be selectable.
Can someone help me?

[sunhour001]

That's the same question I want to ask, and I want to know are there any solutions that we can use a filter or search box inside the TreeSelect Component? while I saw the Tree in the Data Section attached with the filter function but the TreeSelect did not.

[JL45312]

Could try creating a custom header

[JL45312]

i may be late but: https://primevue.org/treeselect/#api.options.TreeNode.selectable
adding selectable as a prop to the parents should work

[AlphaGeek]

Same question here, spent 3 hours on this today. Setting the parent node's selectable property to false does not work as then the parents are not only not selectable, but not expandable either, so there is no way to view their children. This seems like a very common use case, disappointed that there is not way to do this. Nothing in the documentation on creating a custom dropdown panel (slots are shown but no examples)

[AlphaGeek]

Other issue is the @node-select doesn't pass the html event, only the TreeSelect Node object so you can't handle it, programmatically expand/collapse the parent and call event.stopPropogation() or event.preventDefault() to then stop the parent from being selected. Come on, fix this.

[wsfnaj]

To make only the leaf nodes selectable in a tree structure, you can use JavaScript to add event listeners or apply CSS classes based on node types. Here’s a sample approach using JavaScript and HTML:

HTML

<ul id="tree">
  <li class="node">Node 1
    <ul>
      <li class="node leaf">Leaf 1</li>
      <li class="node leaf">Leaf 2</li>
    </ul>
  </li>
  <li class="node">Node 2
    <ul>
      <li class="node leaf">Leaf 3</li>
      <li class="node leaf">Leaf 4</li>
    </ul>
  </li>
</ul>

CSS

.node {
  cursor: pointer;
}

.leaf {
  cursor: pointer;
}

.leaf.selected {
  background-color: yellow;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const tree = document.getElementById('tree');
  
  tree.addEventListener('click', (event) => {
    const target = event.target;
    
    if (target.classList.contains('leaf')) {
      target.classList.toggle('selected');
      // Handle leaf node selection logic here
      console.log('Leaf node selected:', target.textContent);
    }
  });
});

This approach ensures that only leaf nodes are selectable and can be styled or manipulated as required. Read more: https://history-spot.com/