Vuetify: [Bug Report] v-expansion-panel initial open state is alway closed, even when initialised as open

Created on 4 Jul 2018  路  2Comments  路  Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.1.1
Last working version: 1.0.19
Vue: 2.5.16
Browsers: Google Chrome
OS: Mac OSX

Steps to reproduce

See Codepen link (official example).

Expected Behavior

The panel property in the Codepen example is initialised as panel: [false, true, true]. I would expect the v-expansion-panel-content components number 1 and 2 (zero-based) to be open upon initialisation.

Actual Behavior

The v-expansion-panel-content components number 1 and 2 (zero-based) are not open upon initialisation, but closed and then opened with an animation.

Reproduction Link

https://codepen.io/anon/pen/PaggyY?&editors=101

Other comments

This used to work in version 1.0.19 with the value property set on each separate v-expansion-panel-content component.

low bug regression

Most helpful comment

This should be backported

All 2 comments

Can be fixed with a simple modification to register (), but updateFromValue () will need to be rewritten to avoid loads of extra iteration.

diff --git a/src/components/VExpansionPanel/VExpansionPanel.js b/src/components/VExpansionPanel/VExpansionPanel.js
index 1de866d..4cd3157 100644
--- a/src/components/VExpansionPanel/VExpansionPanel.js
+++ b/src/components/VExpansionPanel/VExpansionPanel.js
@@ -106,9 +106,10 @@ export default {
       this.updatePanels(open)
       if (this.expand) this.$emit('input', open)
     },
-    register (uid, toggle) {
-      this.items.push({ uid, toggle })
-      this.open.push(false)
+    register (uid, toggle, vm) {
+      const i = this.items.push({ uid, toggle }) - 1
+      this.value !== null && this.updateFromValue(this.value)
+      vm.isActive = this.open[i]
     },
     unregister (uid) {
       const index = this.items.findIndex(i => i.uid === uid)
diff --git a/src/components/VExpansionPanel/VExpansionPanelContent.js b/src/components/VExpansionPanel/VExpansionPanelContent.js
index ff6965f..0eda534 100644
--- a/src/components/VExpansionPanel/VExpansionPanelContent.js
+++ b/src/components/VExpansionPanel/VExpansionPanelContent.js
@@ -50,8 +50,8 @@ export default {
     }
   },

-  mounted () {
-    this.expansionPanel.register(this._uid, this.toggle)
+  beforeMount () {
+    this.expansionPanel.register(this._uid, this.toggle, this)

     // Can be removed once fully deprecated
     if (typeof this.value !== 'undefined') consoleWarn('v-model has been deprecated', this)

This should be backported

Was this page helpful?
0 / 5 - 0 ratings