fix(modal, tooltips, popovers): remove no longer needed nextTick de…

…lay when updating content in transporter portal (closes #4589) (#4604) * chore: remove nextTick delay in BootstrapVue transporter portal * Update transporter.spec.js * Update modal.spec.js * Update modal.spec.js * Update modal.spec.js * Update modal.spec.js * Update modal.spec.js * Update modal.spec.js * Update modal.spec.js * Update modal.spec.js * Update modal.spec.js * Update modal.spec.js * Update transporter.js Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
bootstrap-vue · Jan 13, 2020 · 0e3e7e0 · 0e3e7e0
1 parent 4f33e16
commit 0e3e7e0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 30 deletions.
diff --git a/src/components/modal/modal.spec.js b/src/components/modal/modal.spec.js
@@ -86,6 +86,7 @@ describe('modal', () => {
       })
 
       expect(wrapper.isVueInstance()).toBe(true)
+
       await waitNT(wrapper.vm)
 
       expect(wrapper.isEmpty()).toBe(true)
@@ -103,6 +104,7 @@ describe('modal', () => {
       })
 
       expect(wrapper.isVueInstance()).toBe(true)
+
       await waitNT(wrapper.vm)
 
       expect(wrapper.isEmpty()).toBe(true)
@@ -127,9 +129,6 @@ describe('modal', () => {
       })
 
       expect(wrapper.isVueInstance()).toBe(true)
-      await waitNT(wrapper.vm)
-      await waitRAF()
-      await waitNT(wrapper.vm)
       await waitRAF()
 
       // Main outer wrapper (has z-index, etc)... The stacker <div>
@@ -186,11 +185,6 @@ describe('modal', () => {
       })
 
       expect(wrapper.isVueInstance()).toBe(true)
-      await waitNT(wrapper.vm)
-      await waitRAF()
-      await waitNT(wrapper.vm)
-      await waitRAF()
-      await waitNT(wrapper.vm)
       await waitRAF()
 
       expect(wrapper.isEmpty()).toBe(true)
@@ -208,10 +202,6 @@ describe('modal', () => {
       // Destroy modal
       wrapper.destroy()
 
-      await waitNT(wrapper.vm)
-      await waitRAF()
-      await waitNT(wrapper.vm)
-      await waitRAF()
       await waitNT(wrapper.vm)
       await waitRAF()
 
@@ -235,10 +225,7 @@ describe('modal', () => {
       })
 
       expect(wrapper.isVueInstance()).toBe(true)
-      await waitNT(wrapper.vm)
-      await waitRAF()
-      await waitNT(wrapper.vm)
-      await waitRAF()
+
       await waitNT(wrapper.vm)
       await waitRAF()
 
@@ -268,8 +255,6 @@ describe('modal', () => {
       await waitRAF()
       await waitNT(wrapper.vm)
       await waitRAF()
-      await waitNT(wrapper.vm)
-      await waitRAF()
 
       expect($modal.attributes('aria-hidden')).toBeDefined()
       expect($modal.attributes('aria-hidden')).toEqual('true')
@@ -293,7 +278,6 @@ describe('modal', () => {
       })
 
       expect(wrapper.isVueInstance()).toBe(true)
-      await waitNT(wrapper.vm)
 
       // Modal title
       const $title = wrapper.find('.modal-title')
@@ -441,6 +425,7 @@ describe('modal', () => {
 
       // Try and close modal (but we prevent it)
       $close.trigger('click')
+      await waitNT(wrapper.vm)
       expect(trigger).toEqual('headerclose')
       expect(evt).toBeInstanceOf(BvModalEvent)
 
@@ -457,6 +442,7 @@ describe('modal', () => {
       trigger = null
       evt = null
       $close.trigger('click')
+      await waitNT(wrapper.vm)
       expect(trigger).toEqual('headerclose')
       expect(evt).toBeInstanceOf(BvModalEvent)
 
@@ -522,6 +508,7 @@ describe('modal', () => {
 
       // Try and close modal (but we prevent it)
       $ok.trigger('click')
+      await waitNT(wrapper.vm)
       expect(trigger).toEqual('ok')
 
       await waitNT(wrapper.vm)
@@ -536,6 +523,7 @@ describe('modal', () => {
       cancelHide = false
       trigger = null
       $cancel.trigger('click')
+      await waitNT(wrapper.vm)
       expect(trigger).toEqual('cancel')
 
       await waitNT(wrapper.vm)
@@ -593,6 +581,7 @@ describe('modal', () => {
 
       // Try and close modal via ESC
       $modal.trigger('keydown.esc')
+      await waitNT(wrapper.vm)
       expect(trigger).toEqual('esc')
 
       await waitNT(wrapper.vm)
@@ -651,6 +640,7 @@ describe('modal', () => {
 
       // Try and close modal via click out
       $modal.trigger('click')
+      await waitNT(wrapper.vm)
       expect(trigger).toEqual('backdrop')
 
       await waitNT(wrapper.vm)
@@ -1211,14 +1201,12 @@ describe('modal', () => {
       // Try and set focusin on external button
       $button.trigger('focusin')
       await waitNT(wrapper.vm)
-      await waitNT(wrapper.vm)
       expect(document.activeElement).not.toBe($button.element)
       expect(document.activeElement).toBe($content.element)
 
       // Try and set focusin on external button
       $button.trigger('focus')
       await waitNT(wrapper.vm)
-      await waitNT(wrapper.vm)
       expect(document.activeElement).not.toBe($button.element)
       expect(document.activeElement).toBe($content.element)
 
@@ -1235,7 +1223,6 @@ describe('modal', () => {
       $bottomTrap.trigger('focusin')
       $bottomTrap.trigger('focus')
       await waitNT(wrapper.vm)
-      await waitNT(wrapper.vm)
       expect(document.activeElement).not.toBe($bottomTrap.element)
       expect(document.activeElement).not.toBe($content.element)
       // The close (x) button (first tabable in modal) should be focused
@@ -1254,7 +1241,6 @@ describe('modal', () => {
       $topTrap.trigger('focusin')
       $topTrap.trigger('focus')
       await waitNT(wrapper.vm)
-      await waitNT(wrapper.vm)
       expect(document.activeElement).not.toBe($topTrap.element)
       expect(document.activeElement).not.toBe($bottomTrap.element)
       expect(document.activeElement).not.toBe($content.element)

diff --git a/src/utils/transporter.js b/src/utils/transporter.js
@@ -95,11 +95,13 @@ export const BTransporterSingle = /*#__PURE__*/ Vue.extend({
     this.mountTarget()
   },
   updated() {
-    // Placed in a nextTick to ensure that children have completed
-    // updating before rendering in the target
-    this.$nextTick(() => {
-      this.updateTarget()
-    })
+    // We need to make sure that all children have completed updating
+    // before rendering in the target
+    // `vue-simple-portal` has the this in a `$nextTick()`,
+    // while `portal-vue` doesn't
+    // Just trying to see if the `$nextTick()` delay is required or not
+    // Since all slots in Vue 2.6.x are always functions
+    this.updateTarget()
   },
   beforeDestroy() {
     this.unmountTarget()

diff --git a/src/utils/transporter.spec.js b/src/utils/transporter.spec.js
@@ -39,7 +39,7 @@ describe('utils/transporter component', () => {
     })
 
     expect(wrapper.isVueInstance()).toBe(true)
-    await waitNT(wrapper.vm)
+
     await waitNT(wrapper.vm)
 
     expect(wrapper.element.nodeType).toBe(Node.COMMENT_NODE)
@@ -54,7 +54,7 @@ describe('utils/transporter component', () => {
     expect(target.parentElement).toBe(document.body)
 
     wrapper.destroy()
-    await waitNT(wrapper.vm)
+
     await waitNT(wrapper.vm)
 
     expect(target.parentElement).toEqual(null)