From 46b563b13538ecbb2b6d77b9a0dfee7092541998 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Mon, 24 Jun 2019 12:40:34 -0400
Subject: [PATCH] fix(VWindowItem): resolve content jumping on transition (not
 scroll related)

fixes #6206
---
 .../src/components/VCarousel/VCarouselItem.ts   |  1 -
 .../src/components/VWindow/VWindowItem.ts       |  6 +++---
 .../VWindow/__tests__/VWindowItem.spec.ts       | 17 ++++++++++-------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/vuetify/src/components/VCarousel/VCarouselItem.ts b/packages/vuetify/src/components/VCarousel/VCarouselItem.ts
index cdbdf13d653..05e770a5463 100644
--- a/packages/vuetify/src/components/VCarousel/VCarouselItem.ts
+++ b/packages/vuetify/src/components/VCarousel/VCarouselItem.ts
@@ -47,7 +47,6 @@ export default baseMixins.extend({
     onBeforeEnter () { /* noop */ },
     onEnter () { /* noop */ },
     onAfterEnter () { /* noop */ },
-    onBeforeLeave () { /* noop */ },
     onEnterCancelled () { /* noop */ },
   },
 })
diff --git a/packages/vuetify/src/components/VWindow/VWindowItem.ts b/packages/vuetify/src/components/VWindow/VWindowItem.ts
index e34b3ee8d74..45c6713be11 100644
--- a/packages/vuetify/src/components/VWindow/VWindowItem.ts
+++ b/packages/vuetify/src/components/VWindow/VWindowItem.ts
@@ -111,7 +111,7 @@ export default baseMixins.extend<options>().extend(
     onBeforeEnter () {
       this.windowGroup.isActive = true
     },
-    onLeave (el: HTMLElement) {
+    onBeforeLeave (el: HTMLElement) {
       this.windowGroup.internalHeight = convertToUnit(el.clientHeight)
     },
     onEnterCancelled () {
@@ -122,7 +122,7 @@ export default baseMixins.extend<options>().extend(
 
       if (isBooted) this.done = done
 
-      requestAnimationFrame(() => {
+      this.$nextTick(() => {
         if (!this.computedTransition) return done()
 
         this.windowGroup.internalHeight = convertToUnit(el.clientHeight)
@@ -156,7 +156,7 @@ export default baseMixins.extend<options>().extend(
       on: {
         afterEnter: this.onAfterEnter,
         beforeEnter: this.onBeforeEnter,
-        leave: this.onLeave,
+        beforeLeave: this.onBeforeLeave,
         enter: this.onEnter,
         enterCancelled: this.onEnterCancelled,
       },
diff --git a/packages/vuetify/src/components/VWindow/__tests__/VWindowItem.spec.ts b/packages/vuetify/src/components/VWindow/__tests__/VWindowItem.spec.ts
index 5ec39876ac2..d05aca3ea5b 100644
--- a/packages/vuetify/src/components/VWindow/__tests__/VWindowItem.spec.ts
+++ b/packages/vuetify/src/components/VWindow/__tests__/VWindowItem.spec.ts
@@ -13,12 +13,12 @@ import {
   createLocalVue,
   mount,
   Wrapper,
+  MountOptions,
 } from '@vue/test-utils'
-import { ExtractVue } from '../../../util/mixins'
 
 describe('VWindowItem.ts', () => {
-  type Instance = ExtractVue<typeof VWindowItem>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  type Instance = InstanceType<typeof VWindowItem>
+  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
   let router: Router
   let localVue: typeof Vue
 
@@ -36,6 +36,7 @@ describe('VWindowItem.ts', () => {
     }
   })
 
+  // eslint-disable-next-line max-statements
   it('should transition content', async () => {
     const wrapper = mount(VWindow, {
       slots: {
@@ -48,6 +49,8 @@ describe('VWindowItem.ts', () => {
       },
     })
 
+    await new Promise(resolve => window.requestAnimationFrame(resolve))
+
     const item = wrapper.find(VWindowItem.options)
     // Before enter
     expect(wrapper.vm.isActive).toBeFalsy()
@@ -58,7 +61,7 @@ describe('VWindowItem.ts', () => {
     const el = document.createElement('div')
     expect(wrapper.vm.internalHeight).toBeUndefined()
     item.vm.onEnter(el)
-    await new Promise(resolve => window.requestAnimationFrame(resolve))
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.internalHeight).toBe('0px')
 
     // After enter
@@ -68,12 +71,12 @@ describe('VWindowItem.ts', () => {
     expect(wrapper.vm.isActive).toBeFalsy()
 
     // Leave
-    item.vm.onLeave(el)
+    item.vm.onBeforeLeave(el)
     expect(wrapper.vm.internalHeight).toBe('0px')
 
     // Canceling
     item.vm.onBeforeEnter()
-    item.vm.onEnter(el)
+    item.vm.onEnter(el, () => {})
     item.vm.onEnterCancelled()
 
     expect(item.vm.wasCancelled).toBeTruthy()
@@ -81,7 +84,7 @@ describe('VWindowItem.ts', () => {
 
     item.vm.onAfterEnter()
 
-    await new Promise(resolve => requestAnimationFrame(resolve))
+    await new Promise(resolve => window.requestAnimationFrame(resolve))
 
     expect(wrapper.vm.isActive).toBeTruthy()
   })