fix(overlayable): get root element's z-index if activeIndex is not av…

…ailable fixes #8473
vuetifyjs · Aug 30, 2019 · db84347 · db84347
1 parent 56edbdc
commit db84347
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 6 deletions.
diff --git a/packages/vuetify/src/components/VDialog/VDialog.sass b/packages/vuetify/src/components/VDialog/VDialog.sass
@@ -38,7 +38,7 @@
   pointer-events: none
   position: fixed
   top: 0
-  transition: .2s map-get($transition, 'fast-in-fast-out')
+  transition: .2s map-get($transition, 'fast-in-fast-out'), z-index 1ms
   width: 100%
   z-index: 6
   outline: none

diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass
@@ -111,9 +111,13 @@
   .v-list-group--sub-group
     display: none
 
-.v-navigation-drawer--temporary,
-.v-navigation-drawer--is-mobile
+.v-navigation-drawer--temporary
+  z-index: 7
+
+.v-navigation-drawer--mobile
   z-index: 6
 
+.v-navigation-drawer--is-mobile,
+.v-navigation-drawer--temporary
   &:not(.v-navigation-drawer--close)
     +elevation(16)
diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.sass b/packages/vuetify/src/components/VOverlay/VOverlay.sass
@@ -16,7 +16,7 @@
   right: 0
   bottom: 0
   pointer-events: none
-  transition: $primary-transition
+  transition: $primary-transition, z-index 1ms
 
 // Element
 .v-overlay__content
@@ -30,7 +30,7 @@
   position: absolute
   right: 0
   top: 0
-  transition: .3s cubic-bezier(.25,.8,.50,1)
+  transition: inherit
   width: 100%
   will-change: opacity
 

diff --git a/packages/vuetify/src/mixins/overlayable/__tests__/overlayable.spec.ts b/packages/vuetify/src/mixins/overlayable/__tests__/overlayable.spec.ts
@@ -58,4 +58,17 @@ describe('Overlayable.ts', () => {
     wrapper.vm.overlay.$el.dispatchEvent(event)
     expect(wrapper.vm.overlay).toBeFalsy()
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/8473
+  it('should get root element z-index if activeIndex is not available', async () => {
+    const wrapper = mountFunction()
+
+    wrapper.vm.$el.style.zIndex = 8
+
+    wrapper.vm.genOverlay()
+
+    await new Promise(resolve => window.requestAnimationFrame(resolve))
+
+    expect(wrapper.vm.overlay.zIndex).toBe(8)
+  })
 })
diff --git a/packages/vuetify/src/mixins/overlayable/index.ts b/packages/vuetify/src/mixins/overlayable/index.ts
@@ -2,7 +2,12 @@
 import VOverlay from '../../components/VOverlay'
 
 // Utilities
-import { keyCodes, addOnceEventListener, addPassiveEventListener } from '../../util/helpers'
+import {
+  keyCodes,
+  addOnceEventListener,
+  addPassiveEventListener,
+  getZIndex,
+} from '../../util/helpers'
 
 // Types
 import Vue from 'vue'
@@ -79,6 +84,8 @@ export default Vue.extend<Vue & Toggleable & Stackable & options>().extend({
 
         if (this.activeZIndex !== undefined) {
           this.overlay.zIndex = String(this.activeZIndex - 1)
+        } else if (this.$el) {
+          this.overlay.zIndex = getZIndex(this.$el)
         }
 
         this.overlay.value = true