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

fixes #8473

Author: johnleider

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

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)

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
 

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)
+  })
 })

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