[Feature Request] Treeview - force at least one node active

[Mikilll94]

Problem to solve

I would like to force the user to have at least one treeview node active. User should not be able to deactivate active node. For v-list-group we have mandatory prop which does exactly this.

Proposed solution

Add new prop mandatory-active for treeview. When this prop is true, at least one treeview node must be active -> similar behavior to mandatory prop in v-list-group.

[escapedcat]

We use vee-validate to create a work-around for this:

        <VTreeview
          ref="fruitTreeview"
          v-model="innerFruits"
          v-validate.disabled="'required'"
          :items="fruitTree"
          item-key="fruitId"
          selectable
          data-vv-name="fruits"
          name="fruits"
        >
          ...

We display a message, if vee-validate isn't happy:

<div v-if="errors.has('fruits')">
    Please select at least one fruit
</div>

Maybe this helps somehow to solve your issue.

[Mikilll94]

@escapedcat This is not a solution. I want to force the user to have at least one treeview node active. Your proposition is not related to active state and it does not work. Error message is not a solution.

[mDemianchuk]

+1

In one of my projects, I use v-treeview for site navigation, where every leaf is a link to a component. I can get the active leaf using @update:active which produces an array of active leaves and then I grab the first one. However, if I click on the same leaf again, it deactivates it, so the resulting array of @update:active is empty. Of course, I can handle a case like that, but it still messes up my css, as that leaf element drops its v-treeview-node--active class.

A simple case like that requires lots of manual work, so having an out-of-the-box feature like this would be very helpful!

[davide-granello]

+1 This would be very helpful!

[williaMot]

+1

There is a temporary solution which is to set the isActive node data property to true every time the @update:active event returns an empty list, that way the v-treeview-node--active class will stick to the element. You can do this using a ref on v-treeview and then targeting the appropriate node in component data.

Of course, this is not the cleanest way to do it, that's why using a deadicated prop would be better.