b-dropdown does not close when clicking on the dropdown button (Safari & Firefox Only)

[achen116]

Describe the bug

When you click on the dropdown button to open the dropdown menu and then you click on the dropdown button again, the dropdown does not close.

Steps to reproduce the bug

1. Go to https://bootstrap-vue.js.org/docs/components/dropdown
2. Click on Dropdown Button in the first example
3. Click on Dropdown Button again
4. Note the dropdown menu quickly closes and reopens

Expected behavior

The dropdown menu should stay closed when the Dropdown Button is clicked the second time.

Versions

Environment:

• Device: Mac
• OS: macOS Mojave
• Browser: Safari 12.1.1 & Firefox 70.0

Additional context

This bug also occurs when b-dropdown is used within b-tabs. It can be reproduced by copying one of the examples from Dropdown and pasting it into one of the examples in Tabs.

[tmorehouse]

@achen116, It appears (to me) to be Mac OS related, as Firefox (v70.0) on Windows doesn't appear to recreate the issue (in both scenarios). Unfortunately I can't test on Safari 😞 .

Do you have any browser extensions that might possibly be interfering? is your screen a touch screen or just a regular display? If using Chrome on Mac do you experience the same issue? What if you try an older version of Firefox, does the issue persist?

[achen116]

@tmorehouse Correct, I don't experience the problem on Windows either. Sorry I forgot to mention that in the original description.

• I do not experience the same issue in Chrome on Mac; it works as expected.
• I don't have any browser extensions for Safari or Firefox so there shouldn't be any interference.
• I'm testing on a regular display and using the Mac touchpad to click on the button. I believe it still occurs when using an external mouse though.
• I just tested on Firefox v69.0.3 and the same issue persists.
• I also just tested on an older Mac OS (Sierra) and run into the same issue for Safari v12.1.1 and Firefox v69.0.3

From my own debugging, it appears the click event is fired twice once it's open, which keeps the dropdown open. I can see that isVisible is set to false and then set back to true after the click event is fired a second time, even though the button was clicked only once. I can't figure out where the second click event is getting fired from. However, if you click on one of the dropdown menu items, or anywhere outside the dropdown, then it will close as expected.

[tmorehouse]

Bizzare...

I wonder if the trackpad is emulating touch events instead of click events when used with Safari and Firefox (but not Chrome)? Would be interesting to see if a plain mouse has the same issues.

We might need to add the safari hack of adding empty mouseover event listeners on each top level children of the body while the menu is opened for devices/browsers that have touchstart event support

[tmorehouse]

@achen116 PR #4329 may fix this...

Could you test out the following preview for us (since we don't have access to a Mac)? And let us know if this fixes your issue?

https://deploy-preview-4329--bootstrap-vue.netlify.com/docs/components/dropdown/

It is a wild guess at what might be the root cause of the issue..

The test 'ontouchstart' in document.documentElement returns false for me in Firefox on windows. Perhaps you could check in your browser console if 'ontouchstart' in document.documentElement returns true for you?

[achen116]

@tmorehouse Unfortunately, the issue is still happening on the preview 😞I tried with a regular mouse on both Safari & Firefox on Mac and run into the same problem.

'ontouchstart' in document.documentElement also returns false for me on both https://deploy-preview-4329--bootstrap-vue.netlify.com/docs/components/dropdown/ and https://bootstrap-vue.js.org/docs/components/dropdown on Safari & Firefox.

[tmorehouse]

@jackmu95 has access to a Mac, so he is going to help see if we can find the culprit.

[achen116]

Awesome! Thanks @tmorehouse & @jackmu95 👍Let me know if there are any other details you need from me in the meantime.

[achen116]

@tmorehouse I was testing the new update and realized I can still reproduce this bug when b-dropdown is nested inside b-tabs (also noted in the Additional Context section of this issue above). It occurs on Mac Safari and Firefox. Dropdowns outside of tabs are working as expected though.

[tmorehouse]

@jackmu95 could you check this out on Mac?

[tmorehouse]

@achen116 does it happen if the tabs are in lazy mode?

[jacobmllr95]

@tmorehouse I can confirm that this issue still exists with BootstrapVue v2.1.0 when using a dropdown in tabs on Safari and Firefox on MacOS.

[tmorehouse]

Hmmm.. so not related to the evt.relatedTarget focus event?

[jacobmllr95]

Have to take a look. Will try to come up with a fix.

[achen116]

@tmorehouse It happens in all tabs regardless of which mode they're in.