[Bug Report] v-treeview UI doesnt update correctly when selecting/deselecting identical objects

[TJBrunson]

Environment

Vuetify Version: 2.3.10
Vue Version: 3.0.0
Browsers: Chrome 85.0.4183.121
OS: Mac OS 10.15.6

Steps to reproduce

Make a selectable tree view with the "vaccine" data object in the JSFiddle provided. Play with selecting different rows. For instance, selected the first instance of "2008-2009 trivalent influenza vaccine". Both instances will become selected as expected and the v-model is updated accordingly. Then try to deselect the second instance of "2008-2009 trivalent influenza vaccine" and notice the first instance is not de-selected, but the v-model is updated correctly. Seems like a UI bug that doesn't re-render all checkboxes correctly. This issue is present in Chrome, Brave, and Safari. I have not checked other browsers.

Expected Behavior

When identical objects are present in different parts of the hierarchy, selecting and deselecting one of them should update the ui for every instance of the object.

Actual Behavior

When selecting the first instance of an object, all other instances of the object become selected. Then, when deselecting a later instance of the object, previous instances are not de-selected.

Reproduction Link

https://jsfiddle.net/hugbtknz/

[nekosaur]

The fiddle does not work

[TJBrunson]

Yeah, for some reason fiddle doesn't recognize the v-treeview component. This should be everything required to replicate it in a dev environment. I just have no experience with JSFiddle, so I don't know how to correctly include the component. Vuetify does it automatically in the dev environment.

[nekosaur]

https://template.vuetifyjs.com

[TJBrunson]

https://codepen.io/tjbrunson/pen/RwRbKGY

Try this

[johnleider]

Leaves must have a unique ID. Removing the dup values solves the issue: https://codepen.io/johnjleider/pen/MWeWGjm

This Pull Request is being closed due to inactivity.

If you have any additional questions, please reach out to us in our Discord community.

[TJBrunson]

Sure, thats one way to solve the problem, but what about trees like mine where objects can be duplicated? It's a real world use case that people may run into. Shouldn't it be supported?

[johnleider]

We have multiple areas of the framework that are similar in nature that won't support duplicate id's; e.g. v-data-table, v-select. This creates a side effect of sorts where similar functionality is different between components.

Thank you for your feedback. I'm going to close this conversation and you are welcome to join Discord if you want to discuss further.