Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
achen116 opened this issue Oct 31, 2019 · 14 comments · Fixed by #4329, mariazevedo88/hash-generator-js#17 or CloudsdaleGroup/AnimFM#3

Comments

@achen116
Copy link

@achen116 achen116 commented Oct 31, 2019

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

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Oct 31, 2019

@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

This comment has been minimized.

Copy link
Author

@achen116 achen116 commented Oct 31, 2019

@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

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Oct 31, 2019

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

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Oct 31, 2019

@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

This comment has been minimized.

Copy link
Author

@achen116 achen116 commented Oct 31, 2019

@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

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Oct 31, 2019

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

@achen116

This comment has been minimized.

Copy link
Author

@achen116 achen116 commented Oct 31, 2019

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

tmorehouse added a commit that referenced this issue Nov 8, 2019
…i/Firefox (Fixes #4328, #4344) (#4329)
@achen116

This comment has been minimized.

Copy link
Author

@achen116 achen116 commented Nov 26, 2019

@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

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 26, 2019

@jackmu95 could you check this out on Mac?

@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 26, 2019

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

@jackmu95 jackmu95 reopened this Nov 26, 2019
@jackmu95

This comment has been minimized.

Copy link
Member

@jackmu95 jackmu95 commented Nov 26, 2019

@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.

@jackmu95 jackmu95 added this to To do in 2.2.0 via automation Nov 26, 2019
@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 26, 2019

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

@jackmu95

This comment has been minimized.

Copy link
Member

@jackmu95 jackmu95 commented Nov 26, 2019

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

@achen116

This comment has been minimized.

Copy link
Author

@achen116 achen116 commented Nov 26, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
2.2.0
  
To do
3 participants
You can’t perform that action at this time.