Vuetify: [Bug Report] unexpected automation in v-list-group

[Kasheftin]

Versions and Environment

Vuetify: 0.17.7
Vue: 2.5.13
Browsers: Chrome 63.0.3239.132
OS: Linux x86_64

Steps to reproduce

Actually v-list-group is so buggy I wonder if anybody uses it.
Consider #10 example from docs, https://vuetifyjs.com/components/lists.

1. Notice <v-list-group :value="item.active"> - here we send the property to some component. We do not subscribe for any events there, so why switching and expanded element works at all? The component can not set the value of item.active from inside, that means the value property is disconnected from some inner variable that actually changes on mouse click and switches the list. Here's the proof: https://codepen.io/kasheftin/pen/RQrvEE?editors=1010 - here we output the item.active property, it does not change while we click on any list item.

2. Why expanding some element collapses the other one? We have just a bunch of v-list-group items inside v-list, they are not connected to each other. We click on some element, expand it, and it magically collapses the other previously expanded element. Where is this logic hidden? It should not happen automatically. What if I want to have several items expanded at once?

3. I updated the #10 example a little bit, set v-model instead of value and added a couple of external buttons, https://codepen.io/kasheftin/pen/zRregP?editors=1010. Switching the value from outside works as expected, it affects only the target element. Several items can be expanded at once. Clicking on an element directly somehow triggers collapsing of other elements. I suppose this logic has to be moved outside of v-list-group.

4. Some more unexpected logic in css. There's keyboard_arrow_down icon. When the item expanded, it magically flips, there's .list--group__header--active .list__tile .list__tile__action:last-of-type .icon { transform: rotate(-180deg); } rule. Why so? Should not it be moved from the inner logic as well? I can easily write <v-icon :class="{flipped: item.active}"> if I want to flip the expanded item's icon, but I don't expect this automation.

Expected Behavior

Expanding one list-group should not collapse the other list-groups automatically. One list-group should not have access to the neighbor list-groups. The :value property should be used directly to set the list-group expanded state. It should not be copied inside the component. Clicking on the list-group-tile slot element should just emit @input event but should not switch the element state internally by itself.

Actual Behavior

I'm afraid there's some hack in list-group that contradicts the vue ideology.

Reproduction Link

https://codepen.io/kasheftin/pen/RQrvEE?editors=1010

[KaelWD]

the value property is disconnected from some inner variable that actually changes on mouse click and switches the list.
why switching and expanded element works at all

Like pretty much everything else in the framework, it holds an internal value so that you can still use it without having to set a v-model. If you do use v-model instead of :value, it updates as you'd expect.

Why expanding some element collapses the other one

Because that's the way it works? I guess this could be more similar to expansion panels, where there's more options of what to keep open and when.

Where is this logic hidden?
I'm afraid there's some hack in list-group that contradicts the vue ideology.

In v-list, it uses vue's provide/inject. Nothing contradicting "vue ideology" (whatever the hell that is), just making it simpler to use.

What if I want to have several items expanded at once?
One list-group should not have access to the neighbor list-groups.

This reads more like a feature request.

transform: rotate(-180deg) Should not it be moved from the inner logic as well?

Again, not a bug. There was originally no way to change the icon, so it didn't matter how it was rotated.

[johnleider]

The only actionable feedback from this is keeping other groups open when expanding another. This was added in beta, along with other tweaks and optimizations. The remaining statements were addressed by @KaelWD and are not bugs.

[purplelady105]

I know that this thread is closed, but I want my v-list-group's to automatically close when expanding another, like they did originally. I haven't been able to find an answer anywhere else and this thread is the closest I've gotten to a solution. Can someone point me in the right direction?

[mathiasleroy]

@purplelady105 using vue 2.x they do automatically close.

I actually don't want sibling groups to automatically close and I have no idea how to achieve that 😅
If someone has a hint...

EDIT: Ok found it. have to use expand on the v-list

<v-list expand>

[purplelady105]

@mathiasleroy That is very good to know, thank you for that info!