Vuetify: [Bug Report] Nested expansion-panels get active class of parent

[Tzahile]

Environment

Vuetify Version: 2.0.10
Vue Version: 2.6.10
Browsers: Chrome 76.0.3809.100
OS: Windows 10

Steps to reproduce

Create an expansion-panels component with few panels,
In one of the panels content, put another expansion-panels component with at least one panel.

Expected Behavior

When opening the parent panel, nested panels height is expected to be as normal as other panels height: 48px

Actual Behavior

nested panels get the class behaviour of their parent, .v-expansion-panel--active, resulting change in their min-height from 48px to 64px

Reproduction Link

https://codepen.io/Tzahile/pen/QWLdLzE?editors=1010

[andreydos]

I catch something like this in my project too and need some help :)

[andreydos]

My issue was fixed after manual update to 2.0.10 version (I had 2.0.7 previously). Thanks

[pranavcbalan]

The following style is getting applied to all nested panel elements since the parent is active.

.v-expansion-panel--active .v-expansion-panel-header {
    min-height: 64px; 
}

It needs to update with the direct child selector to avoid selecting nested expansion panel elements.

 .v-expansion-panel--active > .v-expansion-panel-header {
     min-height: 64px; 
}

---

Simple workaround

.v-expansion-panel-header {
  min-height: 48px !important;
}

.v-expansion-panel--active > .v-expansion-panel-header {
  min-height: 64px !important;
}

https://codepen.io/pranavcbalan/pen/QWWLzJK