@dimailn/vuetify 2.7.2-alpha47 → 2.7.2-alpha49

package/src/mixins/overlayable/__tests__/overlayable.spec.ts

@@ -131,4 +131,107 @@ describe('Overlayable.ts', () => {
 
     expect(cb).toHaveBeenCalledTimes(2)
   })
+
+  describe('stale overlay ref after DOM detach', () => {
+    /** Как у VNavigationDrawer: showOverlay управляет genOverlay/removeOverlay */
+    const DrawerLike = defineComponent({
+      mixins: [Overlayable],
+      data: () => ({
+        isActive: false,
+        isMobile: false,
+        temporary: false
+      }),
+      computed: {
+        showOverlay (): boolean {
+          return this.isActive && (this.isMobile || this.temporary)
+        }
+      },
+      watch: {
+        showOverlay (val: boolean) {
+          if (val) this.genOverlay()
+          else this.removeOverlay()
+        }
+      },
+      render: () => h('div', { class: 'drawer-host' })
+    })
+
+    let mountDrawerLike: (options?: MountingOptions<any>) => VueWrapper<any>
+
+    beforeEach(() => {
+      document.body.innerHTML = ''
+      document.body.setAttribute('data-app', 'true')
+
+      mountDrawerLike = (options = {}) => mount(DrawerLike, {
+        global: {
+          mocks: {
+            $vuetify: { breakpoint: {} }
+          }
+        },
+        ...options
+      })
+    })
+
+    it('genOverlay пересоздаёт оверлей если узел отцеплён от DOM', async () => {
+      const wrapper = mountDrawerLike()
+
+      wrapper.vm.temporary = true
+      wrapper.vm.isActive = true
+      await nextTick()
+      await waitAnimationFrame()
+
+      const app = document.querySelector('[data-app]') as HTMLElement
+      wrapper.vm.overlay!.$el.parentNode!.remove()
+
+      wrapper.vm.genOverlay()
+      await waitAnimationFrame()
+
+      expect(app.querySelector('.v-overlay--active')).toBeTruthy()
+      expect(wrapper.vm.overlay!.$el.isConnected).toBe(true)
+    })
+
+    it('повторное открытие дровера восстанавливает оверлей в [data-app]', async () => {
+      const wrapper = mountDrawerLike()
+
+      wrapper.vm.temporary = true
+      wrapper.vm.isActive = true
+      await nextTick()
+      await waitAnimationFrame()
+
+      const app = document.querySelector('[data-app]') as HTMLElement
+      wrapper.vm.overlay!.$el.parentNode!.remove()
+
+      wrapper.vm.isActive = false
+      await nextTick()
+      wrapper.vm.isActive = true
+      await nextTick()
+      await waitAnimationFrame()
+
+      expect(app.querySelector('.v-overlay--active')).toBeTruthy()
+      expect(wrapper.vm.overlay!.$el.isConnected).toBe(true)
+    })
+
+    it('showOverlay true→true не вызывает genOverlay после потери [data-app]', async () => {
+      const genOverlay = jest.fn()
+      const removeOverlay = jest.fn()
+
+      const wrapper = mountDrawerLike()
+
+      wrapper.vm.genOverlay = genOverlay
+      wrapper.vm.removeOverlay = removeOverlay
+
+      wrapper.vm.temporary = true
+      wrapper.vm.isActive = true
+      await nextTick()
+
+      genOverlay.mockClear()
+      removeOverlay.mockClear()
+
+      document.body.innerHTML = ''
+      document.body.setAttribute('data-app', 'true')
+
+      expect(wrapper.vm.showOverlay).toBe(true)
+      expect(genOverlay).not.toHaveBeenCalled()
+      expect(removeOverlay).not.toHaveBeenCalled()
+    })
+  })
 })

package/src/mixins/overlayable/index.ts

@@ -112,7 +112,17 @@ export default defineComponent({
 
       if (this.hideOverlay) return
 
-      if (!this.overlay) this.createOverlay()
+      if (!this.overlay?.$el?.isConnected) {
+        if (this.overlay) {
+          cancelAnimationFrame(this.animationFrame)
+          const container = this.overlay.$el?.parentNode as HTMLElement | null
+          this.overlayApp?.unmount()
+          this.overlayApp = null
+          if (container?.parentNode) container.parentNode.removeChild(container)
+          this.overlay = null
+        }
+        this.createOverlay()
+      }
 
       this.animationFrame = requestAnimationFrame(() => {
         if (!this.overlay) return
@@ -131,6 +141,15 @@ export default defineComponent({
     /** removeOverlay(false) will not restore the scollbar afterwards */
     removeOverlay (showScroll = true) {
       if (this.overlay) {
+        if (!this.overlay.$el?.isConnected) {
+          cancelAnimationFrame(this.animationFrame)
+          this.overlayApp?.unmount()
+          this.overlayApp = null
+          this.overlay = null
+          showScroll && this.showScroll()
+          return
+        }
+
         addOnceEventListener(this.overlay.$el, 'transitionend', () => {
           if (
             !this.overlay ||