fix(v-b-toggle): handle component updates on click listeners (#5690)

Co-authored-by: Hiws <rni@nova-c.dk>

Author: jacobmllr95

src/components/navbar/navbar-toggle.spec.js

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { waitNT } from '../../../tests/utils'
+import { waitNT, waitRAF } from '../../../tests/utils'
 import { BNavbarToggle } from './navbar-toggle'
 
 describe('navbar-toggle', () => {
@@ -106,6 +106,10 @@ describe('navbar-toggle', () => {
         target: 'target-7'
       }
     })
+
+    await waitRAF()
+    await waitNT(wrapper.vm)
+
     let rootClicked = false
     const onRootClick = () => {
       rootClicked = true

src/directives/toggle/toggle.js

@@ -9,10 +9,11 @@ import {
   isTag,
   removeAttr,
   removeClass,
+  requestAF,
   setAttr
 } from '../../utils/dom'
 import { isBrowser } from '../../utils/env'
-import { eventOn, eventOff } from '../../utils/events'
+import { EVENT_OPTIONS_PASSIVE, eventOn, eventOff } from '../../utils/events'
 import { isString } from '../../utils/inspect'
 import { keys } from '../../utils/object'
 
@@ -95,8 +96,8 @@ const getTargets = ({ modifiers, arg, value }, el) => {
 const removeClickListener = el => {
   const handler = el[BV_TOGGLE_CLICK_HANDLER]
   if (handler) {
-    eventOff(el, 'click', handler)
-    eventOff(el, 'keydown', handler)
+    eventOff(el, 'click', handler, EVENT_OPTIONS_PASSIVE)
+    eventOff(el, 'keydown', handler, EVENT_OPTIONS_PASSIVE)
   }
   el[BV_TOGGLE_CLICK_HANDLER] = null
 }
@@ -116,9 +117,9 @@ const addClickListener = (el, vnode) => {
       }
     }
     el[BV_TOGGLE_CLICK_HANDLER] = handler
-    eventOn(el, 'click', handler)
+    eventOn(el, 'click', handler, EVENT_OPTIONS_PASSIVE)
     if (isNonStandardTag(el)) {
-      eventOn(el, 'keydown', handler)
+      eventOn(el, 'keydown', handler, EVENT_OPTIONS_PASSIVE)
     }
   }
 }
@@ -203,7 +204,11 @@ const handleUpdate = (el, binding, vnode) => {
   }
 
   // Add/Update our click listener(s)
-  addClickListener(el, vnode)
+  // Wrap in a `requestAF()` to allow any previous
+  // click handling to occur first
+  requestAF(() => {
+    addClickListener(el, vnode)
+  })
 
   // If targets array has changed, update
   if (!looseEqual(targets, el[BV_TOGGLE_TARGETS])) {

src/directives/toggle/toggle.spec.js

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { waitNT } from '../../../tests/utils'
+import { waitNT, waitRAF } from '../../../tests/utils'
 import { VBToggle } from './toggle'
 
 // Emitted control event for collapse (emitted to collapse)
@@ -29,6 +29,9 @@ describe('v-b-toggle directive', () => {
 
     const wrapper = mount(App)
 
+    await waitRAF()
+    await waitNT(wrapper.vm)
+
     expect(wrapper.vm).toBeDefined()
     expect(wrapper.element.tagName).toBe('BUTTON')
     expect(spy).not.toHaveBeenCalled()
@@ -72,6 +75,9 @@ describe('v-b-toggle directive', () => {
 
     const wrapper = mount(App)
 
+    await waitRAF()
+    await waitNT(wrapper.vm)
+
     expect(wrapper.vm).toBeDefined()
     expect(wrapper.element.tagName).toBe('BUTTON')
     expect(spy).not.toHaveBeenCalled()
@@ -113,6 +119,9 @@ describe('v-b-toggle directive', () => {
 
     const wrapper = mount(App)
 
+    await waitRAF()
+    await waitNT(wrapper.vm)
+
     expect(wrapper.vm).toBeDefined()
     expect(wrapper.element.tagName).toBe('BUTTON')
     expect(spy).not.toHaveBeenCalled()
@@ -154,6 +163,9 @@ describe('v-b-toggle directive', () => {
 
     const wrapper = mount(App)
 
+    await waitRAF()
+    await waitNT(wrapper.vm)
+
     expect(wrapper.vm).toBeDefined()
     expect(wrapper.element.tagName).toBe('A')
     expect(spy).not.toHaveBeenCalled()
@@ -207,6 +219,9 @@ describe('v-b-toggle directive', () => {
       }
     })
 
+    await waitRAF()
+    await waitNT(wrapper.vm)
+
     expect(wrapper.vm).toBeDefined()
     expect(wrapper.element.tagName).toBe('BUTTON')
     expect(spy).not.toHaveBeenCalled()
@@ -279,6 +294,9 @@ describe('v-b-toggle directive', () => {
 
     const wrapper = mount(App)
 
+    await waitRAF()
+    await waitNT(wrapper.vm)
+
     expect(wrapper.vm).toBeDefined()
     expect(wrapper.element.tagName).toBe('SPAN')
     expect(spy).not.toHaveBeenCalled()