Skip to content

Commit 2779a0a

Browse files
tmorehousetmorehouse
authored
fix(b-dropdown): handle issue with touch devices on MacOS using Safari/Firefox (Fixes #4328, #4344) (#4329)
1 parent f419cb4 commit 2779a0a

File tree

5 files changed

+73
-59
lines changed

5 files changed

+73
-59
lines changed

‎src/components/dropdown/dropdown.spec.js‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -417,8 +417,9 @@ describe('dropdown', () => {
417417
const localVue = new CreateLocalVue()
418418
const App = localVue.extend({
419419
render(h) {
420-
return h('div', {}, [
421-
h(BDropdown, { props: { id: 'test' } }, [h(BDropdownItem, {}, 'item')])
420+
return h('div', { attrs: { id: 'container' } }, [
421+
h(BDropdown, { props: { id: 'test' } }, [h(BDropdownItem, {}, 'item')]),
422+
h('input', { attrs: { id: 'input' } })
422423
])
423424
}
424425
})
@@ -434,10 +435,12 @@ describe('dropdown', () => {
434435
expect(wrapper.findAll('.dropdown-menu').length).toBe(1)
435436
expect(wrapper.findAll('.dropdown-menu .dropdown-item').length).toBe(1)
436437

438+
const $container = wrapper.find('#container')
437439
const $dropdown = wrapper.find('.dropdown')
438440
const $toggle = wrapper.find('.dropdown-toggle')
439441
const $menu = wrapper.find('.dropdown-menu')
440442
const $item = wrapper.find('.dropdown-item')
443+
const $input = wrapper.find('#input')
441444

442445
expect($dropdown.isVueInstance()).toBe(true)
443446

@@ -480,21 +483,21 @@ describe('dropdown', () => {
480483
expect($toggle.attributes('aria-expanded')).toEqual('false')
481484
expect($dropdown.classes()).not.toContain('show')
482485

483-
// Open menu via .show() method
486+
// Open menu via ´.show()´ method
484487
$dropdown.vm.show()
485488
await waitNT(wrapper.vm)
486489
await waitRAF()
487490
expect($toggle.attributes('aria-expanded')).toEqual('true')
488491
expect($dropdown.classes()).toContain('show')
489492

490-
// Close menu via .hide() method
493+
// Close menu via ´.hide()´ method
491494
$dropdown.vm.hide()
492495
await waitNT(wrapper.vm)
493496
await waitRAF()
494497
expect($toggle.attributes('aria-expanded')).toEqual('false')
495498
expect($dropdown.classes()).not.toContain('show')
496499

497-
// Open menu via .show() method again
500+
// Open menu via ´.show()´ method again
498501
$dropdown.vm.show()
499502
await waitNT(wrapper.vm)
500503
await waitRAF()
@@ -503,10 +506,7 @@ describe('dropdown', () => {
503506
expect(document.activeElement).toBe($menu.element)
504507

505508
// Close menu by moving focus away from menu
506-
// which triggers a focusout event on menu
507-
$menu.trigger('focusout', {
508-
relatedTarget: document.body
509-
})
509+
$input.trigger('focusin')
510510
await waitNT(wrapper.vm)
511511
await waitRAF()
512512
expect($dropdown.classes()).not.toContain('show')
@@ -520,17 +520,14 @@ describe('dropdown', () => {
520520
expect($toggle.attributes('aria-expanded')).toEqual('true')
521521
expect(document.activeElement).toBe($menu.element)
522522

523-
// Close menu by moving focus away from menu
524-
// which triggers a focusout event on menu
525-
$menu.trigger('focusout', {
526-
relatedTarget: document.body
527-
})
523+
// Close menu by clicking outside
524+
$container.trigger('click')
528525
await waitNT(wrapper.vm)
529526
await waitRAF()
530527
expect($dropdown.classes()).not.toContain('show')
531528
expect($toggle.attributes('aria-expanded')).toEqual('false')
532529

533-
// Open menu via .show() method again
530+
// Open menu via ´.show()´ method again
534531
$dropdown.vm.show()
535532
await waitNT(wrapper.vm)
536533
await waitRAF()
@@ -544,7 +541,7 @@ describe('dropdown', () => {
544541
expect($dropdown.classes()).not.toContain('show')
545542
expect($toggle.attributes('aria-expanded')).toEqual('false')
546543

547-
// Open menu via .show() method again
544+
// Open menu via ´.show()´ method again
548545
$dropdown.vm.show()
549546
await waitNT(wrapper.vm)
550547
await waitRAF()

‎src/components/dropdown/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
},
4242
{
4343
"prop": "offset",
44-
"description": "Specify the number of pixes to shift the menu by. Negative values supported"
44+
"description": "Specify the number of pixels to shift the menu by. Negative values supported"
4545
},
4646
{
4747
"prop": "lazy",
@@ -69,6 +69,7 @@
6969
},
7070
{
7171
"prop": "block",
72+
"version": "2.1.0",
7273
"description": "Renders a 100% width toggle button (expands to the width of it's parent container)"
7374
},
7475
{

‎src/mixins/click-out.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { contains, eventOff, eventOn } from '../utils/dom'
22

3+
const eventOptions = { passive: true, capture: false }
4+
35
// @vue/component
46
export default {
57
data() {
@@ -10,9 +12,9 @@ export default {
1012
watch: {
1113
listenForClickOut(newValue, oldValue) {
1214
if (newValue !== oldValue) {
13-
eventOff(this.clickOutElement, this.clickOutEventName, this._clickOutHandler, false)
15+
eventOff(this.clickOutElement, this.clickOutEventName, this._clickOutHandler, eventOptions)
1416
if (newValue) {
15-
eventOn(this.clickOutElement, this.clickOutEventName, this._clickOutHandler, false)
17+
eventOn(this.clickOutElement, this.clickOutEventName, this._clickOutHandler, eventOptions)
1618
}
1719
}
1820
}
@@ -30,11 +32,11 @@ export default {
3032
this.clickOutEventName = 'ontouchstart' in document.documentElement ? 'touchstart' : 'click'
3133
}
3234
if (this.listenForClickOut) {
33-
eventOn(this.clickOutElement, this.clickOutEventName, this._clickOutHandler, false)
35+
eventOn(this.clickOutElement, this.clickOutEventName, this._clickOutHandler, eventOptions)
3436
}
3537
},
3638
beforeDestroy() /* istanbul ignore next */ {
37-
eventOff(this.clickOutElement, this.clickOutEventName, this._clickOutHandler, false)
39+
eventOff(this.clickOutElement, this.clickOutEventName, this._clickOutHandler, eventOptions)
3840
},
3941
methods: {
4042
isClickOut(evt) {

‎src/mixins/dropdown.js‎

Lines changed: 46 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@ import Popper from 'popper.js'
22
import KeyCodes from '../utils/key-codes'
33
import warn from '../utils/warn'
44
import { BvEvent } from '../utils/bv-event.class'
5-
import { closest, contains, isVisible, requestAF, selectAll, eventOn, eventOff } from '../utils/dom'
5+
import { closest, contains, isVisible, requestAF, selectAll } from '../utils/dom'
6+
import { hasTouchSupport } from '../utils/env'
67
import { isNull } from '../utils/inspect'
8+
import clickOutMixin from './click-out'
9+
import focusInMixin from './focus-in'
710
import idMixin from './id'
811

912
// Return an array of visible items
@@ -15,7 +18,7 @@ const ROOT_DROPDOWN_SHOWN = `${ROOT_DROPDOWN_PREFIX}shown`
1518
const ROOT_DROPDOWN_HIDDEN = `${ROOT_DROPDOWN_PREFIX}hidden`
1619

1720
// Delay when loosing focus before closing menu (in ms)
18-
const FOCUSOUT_DELAY = 100
21+
const FOCUSOUT_DELAY = hasTouchSupport ? 450 : 150
1922

2023
// Dropdown item CSS selectors
2124
const Selector = {
@@ -47,7 +50,7 @@ const AttachmentMap = {
4750

4851
// @vue/component
4952
export default {
50-
mixins: [idMixin],
53+
mixins: [idMixin, clickOutMixin, focusInMixin],
5154
provide() {
5255
return {
5356
bvDropdown: this
@@ -171,18 +174,21 @@ export default {
171174
},
172175
created() {
173176
// Create non-reactive property
174-
this._popper = null
177+
this.$_popper = null
178+
this.$_hideTimeout = null
179+
this.$_noop = () => {}
175180
},
176181
deactivated() /* istanbul ignore next: not easy to test */ {
177182
// In case we are inside a `<keep-alive>`
178183
this.visible = false
179184
this.whileOpenListen(false)
180-
this.removePopper()
185+
this.destroyPopper()
181186
},
182187
beforeDestroy() {
183188
this.visible = false
184189
this.whileOpenListen(false)
185-
this.removePopper()
190+
this.destroyPopper()
191+
this.clearHideTimeout()
186192
},
187193
methods: {
188194
// Event emitter
@@ -235,18 +241,25 @@ export default {
235241
this.whileOpenListen(false)
236242
this.$root.$emit(ROOT_DROPDOWN_HIDDEN, this)
237243
this.$emit('hidden')
238-
this.removePopper()
244+
this.destroyPopper()
239245
},
240246
createPopper(element) {
241-
this.removePopper()
242-
this._popper = new Popper(element, this.$refs.menu, this.getPopperConfig())
247+
this.destroyPopper()
248+
this.$_popper = new Popper(element, this.$refs.menu, this.getPopperConfig())
243249
},
244-
removePopper() {
245-
if (this._popper) {
250+
destroyPopper() {
251+
if (this.$_popper) {
246252
// Ensure popper event listeners are removed cleanly
247-
this._popper.destroy()
253+
this.$_popper.destroy()
254+
}
255+
this.$_popper = null
256+
},
257+
clearHideTimeout() {
258+
/* istanbul ignore next */
259+
if (this.$_hideTimeout) {
260+
clearTimeout(this.$_hideTimeout)
261+
this.$_hideTimeout = null
248262
}
249-
this._popper = null
250263
},
251264
getPopperConfig() {
252265
let placement = AttachmentMap.BOTTOM
@@ -271,17 +284,15 @@ export default {
271284
}
272285
return { ...popperConfig, ...(this.popperOpts || {}) }
273286
},
287+
// Turn listeners on/off while open
274288
whileOpenListen(isOpen) {
275-
// turn listeners on/off while open
276-
if (isOpen) {
277-
// If another dropdown is opened
278-
this.$root.$on(ROOT_DROPDOWN_SHOWN, this.rootCloseListener)
279-
// Hide the menu when focus moves out
280-
eventOn(this.$el, 'focusout', this.onFocusOut, { passive: true })
281-
} else {
282-
this.$root.$off(ROOT_DROPDOWN_SHOWN, this.rootCloseListener)
283-
eventOff(this.$el, 'focusout', this.onFocusOut, { passive: true })
284-
}
289+
// Hide the dropdown when clicked outside
290+
this.listenForClickOut = isOpen
291+
// Hide the dropdown when it loses focus
292+
this.listenForFocusIn = isOpen
293+
// Hide the dropdown when another dropdown is opened
294+
const method = isOpen ? '$on' : '$off'
295+
this.$root[method](ROOT_DROPDOWN_SHOWN, this.rootCloseListener)
285296
},
286297
rootCloseListener(vm) {
287298
if (vm !== this) {
@@ -375,27 +386,28 @@ export default {
375386
this.$once('hidden', this.focusToggler)
376387
}
377388
},
378-
// Dropdown wrapper focusOut handler
379-
onFocusOut(evt) {
380-
// `relatedTarget` is the element gaining focus
381-
const relatedTarget = evt.relatedTarget
382-
// If focus moves outside the menu or toggler, then close menu
383-
if (
384-
this.visible &&
385-
!contains(this.$refs.menu, relatedTarget) &&
386-
!contains(this.toggler, relatedTarget)
387-
) {
389+
// Document click out listener
390+
clickOutHandler(evt) {
391+
const target = evt.target
392+
if (this.visible && !contains(this.$refs.menu, target) && !contains(this.toggler, target)) {
388393
const doHide = () => {
389394
this.visible = false
395+
return null
390396
}
391397
// When we are in a navbar (which has been responsively stacked), we
392398
// delay the dropdown's closing so that the next element has a chance
393399
// to have it's click handler fired (in case it's position moves on
394400
// the screen do to a navbar menu above it collapsing)
395401
// https://github.com/bootstrap-vue/bootstrap-vue/issues/4113
396-
this.inNavbar ? setTimeout(doHide, FOCUSOUT_DELAY) : doHide()
402+
this.clearHideTimeout()
403+
this.$_hideTimeout = this.inNavbar ? setTimeout(doHide, FOCUSOUT_DELAY) : doHide()
397404
}
398405
},
406+
// Document focusin listener
407+
focusInHandler(evt) {
408+
// Shared logic with click-out handler
409+
this.clickOutHandler(evt)
410+
},
399411
// Keyboard nav
400412
focusNext(evt, up) {
401413
// Ignore key up/down on form elements

‎src/mixins/focus-in.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { eventOff, eventOn } from '../utils/dom'
22

3+
const eventOptions = { passive: true, capture: false }
4+
35
// @vue/component
46
export default {
57
data() {
@@ -10,9 +12,9 @@ export default {
1012
watch: {
1113
listenForFocusIn(newValue, oldValue) {
1214
if (newValue !== oldValue) {
13-
eventOff(this.focusInElement, 'focusin', this._focusInHandler, false)
15+
eventOff(this.focusInElement, 'focusin', this._focusInHandler, eventOptions)
1416
if (newValue) {
15-
eventOn(this.focusInElement, 'focusin', this._focusInHandler, false)
17+
eventOn(this.focusInElement, 'focusin', this._focusInHandler, eventOptions)
1618
}
1719
}
1820
}
@@ -26,11 +28,11 @@ export default {
2628
this.focusInElement = document
2729
}
2830
if (this.listenForFocusIn) {
29-
eventOn(this.focusInElement, 'focusin', this._focusInHandler, false)
31+
eventOn(this.focusInElement, 'focusin', this._focusInHandler, eventOptions)
3032
}
3133
},
3234
beforeDestroy() /* istanbul ignore next */ {
33-
eventOff(this.focusInElement, 'focusin', this._focusInHandler, false)
35+
eventOff(this.focusInElement, 'focusin', this._focusInHandler, eventOptions)
3436
},
3537
methods: {
3638
_focusInHandler(evt) {

0 commit comments

Comments
 (0)