search

N00ts / vue3-treeview

a simple treeview in vue js 3
MIT License
71 stars 61 forks source link

Multiple treeview instances on same page interfere #4

Closed jumble closed 2 years ago

jumble commented 2 years ago

Maximization and minimization events are duplicated across all active trees. Can be replicated in the basic sandbox (https://codesandbox.io/s/basic-1g2jt) by duplicating the tree element defined on line 2 of App.vue.

Thanks for creating this, it's refreshingly minimal and functional.

N00ts commented 2 years ago

Hey, this is completely normal, if you have two instances of treeview with same data, because data are reactive, they will also share the same status (open / close - checked / unchecked etc...). I fixed your example to show how you can have two instances with same data. Of course, they will live separately !

jumble commented 2 years ago

Thank you for responding! What you have said about reactive data makes some sense, and in the provided example it is true that the maximization/minimization events are not duplicated across the trees.

However, selection events are still duplicated in your example. To replicate this behavior, fully unfold both trees, then attempt to select each item in turn, starting from the bottom. The first three selections (text2, text12, text11 from the lower tree) work correctly. The second three selections (text2, text12, text11 from the upper tree) will instead select the counterparts of those nodes from the lower tree.

jumble commented 2 years ago

selection_issues

Here is a GIF depicting behavior similar to that which I described above occurring in your provided sandbox.

jumble commented 2 years ago

I don't have much Vue experience, but would be happy to take a look at fixing this next week. Would that be helpful?

N00ts commented 2 years ago

Heu, I have already made the fix, i'm fixing unit tests. It should be availabe next week :)

N00ts commented 2 years ago

Should be fixed now :)

jumble commented 2 years ago

Yeah!! It is fixed. Thank you!!!