fix(VWindowItem): resolve content jumping on transition (not scroll r…

…elated) fixes #6206
vuetifyjs · Jun 24, 2019 · 46b563b · 46b563b
1 parent 52b6413
commit 46b563b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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,20 +71,20 @@ 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()
     expect(wrapper.vm.isActive).toBeTruthy()
 
     item.vm.onAfterEnter()
 
-    await new Promise(resolve => requestAnimationFrame(resolve))
+    await new Promise(resolve => window.requestAnimationFrame(resolve))
 
     expect(wrapper.vm.isActive).toBeTruthy()
   })