Update dropdown.js

jacobmllr95 · jacobmllr95 · commit a9a395bdbfbf · 2019-11-01T09:33:39.000+01:00
diff --git a/src/mixins/dropdown.js b/src/mixins/dropdown.js
@@ -2,9 +2,10 @@ import Popper from 'popper.js'
 import KeyCodes from '../utils/key-codes'
 import warn from '../utils/warn'
 import { BvEvent } from '../utils/bv-event.class'
-import { from as arrayFrom } from '../utils/array'
-import { closest, contains, isVisible, requestAF, selectAll, eventOn, eventOff } from '../utils/dom'
+import { closest, contains, isVisible, requestAF, selectAll } from '../utils/dom'
 import { isNull } from '../utils/inspect'
+import clickOutMixin from './click-out'
+import focusInMixin from './focus-in'
 import idMixin from './id'
 
 // Return an array of visible items
@@ -15,9 +16,6 @@ const ROOT_DROPDOWN_PREFIX = 'bv::dropdown::'
 const ROOT_DROPDOWN_SHOWN = `${ROOT_DROPDOWN_PREFIX}shown`
 const ROOT_DROPDOWN_HIDDEN = `${ROOT_DROPDOWN_PREFIX}hidden`
 
-// Delay when loosing focus before closing menu (in ms)
-const FOCUSOUT_DELAY = 100
-
 // Dropdown item CSS selectors
 const Selector = {
   FORM_CHILD: '.dropdown form',
@@ -48,7 +46,7 @@ const AttachmentMap = {
 
 // @vue/component
 export default {
-  mixins: [idMixin],
+  mixins: [idMixin, clickOutMixin, focusInMixin],
   provide() {
     return {
       bvDropdown: this
@@ -273,31 +271,18 @@ export default {
       }
       return { ...popperConfig, ...(this.popperOpts || {}) }
     },
+    isDropdownElement(el) {
+      return contains(this.$refs.menu, el) || contains(this.toggler, el)
+    },
+    // Turn listeners on/off while open
     whileOpenListen(isOpen) {
-      // turn listeners on/off while open
-      if (isOpen) {
-        // If another dropdown is opened
-        this.$root.$on(ROOT_DROPDOWN_SHOWN, this.rootCloseListener)
-        // Hide the menu when focus moves out
-        eventOn(this.$el, 'focusout', this.onFocusOut, { passive: true })
-      } else {
-        this.$root.$off(ROOT_DROPDOWN_SHOWN, this.rootCloseListener)
-        eventOff(this.$el, 'focusout', this.onFocusOut, { passive: true })
-      }
-      // Handle special case for touch events on iOS
-      this.setOnTouchStartListener(isOpen)
-    },
-    setOnTouchStartListener(isOpen) /* istanbul ignore next: No JSDOM support of `ontouchstart` */ {
-      // If this is a touch-enabled device we add extra empty
-      // `mouseover` listeners to the body's immediate children
-      // Only needed because of broken event delegation on iOS
-      // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
-      if ('ontouchstart' in document.documentElement) {
-        const method = isOpen ? eventOn : eventOff
-        arrayFrom(document.body.children).forEach(el => {
-          method(el, 'mouseover', this.$_noop)
-        })
-      }
+      // Hide the dropdown when clicked outside
+      this.listenForClickOut = isOpen
+      // Hide the dropdown when it loses focus
+      this.listenForFocusIn = isOpen
+      // Hide the dropdown when another dropdown is opened
+      const method = isOpen ? '$on' : '$off'
+      this.$root[method](ROOT_DROPDOWN_SHOWN, this.rootCloseListener)
     },
     rootCloseListener(vm) {
       if (vm !== this) {
@@ -391,25 +376,16 @@ export default {
         this.$once('hidden', this.focusToggler)
       }
     },
-    // Dropdown wrapper focusOut handler
-    onFocusOut(evt) {
-      // `relatedTarget` is the element gaining focus
-      const relatedTarget = evt.relatedTarget
-      // If focus moves outside the menu or toggler, then close menu
-      if (
-        this.visible &&
-        !contains(this.$refs.menu, relatedTarget) &&
-        !contains(this.toggler, relatedTarget)
-      ) {
-        const doHide = () => {
-          this.visible = false
-        }
-        // When we are in a navbar (which has been responsively stacked), we
-        // delay the dropdown's closing so that the next element has a chance
-        // to have it's click handler fired (in case it's position moves on
-        // the screen do to a navbar menu above it collapsing)
-        // https://github.com/bootstrap-vue/bootstrap-vue/issues/4113
-        this.inNavbar ? setTimeout(doHide, FOCUSOUT_DELAY) : doHide()
+    // Document click out listener
+    clickOutHandler(evt) {
+      if (this.visible && !this.isDropdownElement(evt.target)) {
+        this.visible = false
+      }
+    },
+    // Document focusin listener
+    focusInHandler(evt) {
+      if (this.visible && !this.isDropdownElement(evt.target)) {
+        this.visible = false
       }
     },
     // Keyboard nav
