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

Popover dismiss fails on touchscreens #5099

Comments

@stevelacey
Copy link

@stevelacey stevelacey commented Apr 5, 2020

Describe the bug

The v-b-popover.click.blur solution for dismiss on next click (self dismissing) works fine on desktop but fails on touchscreen.

Expected behavior

Tapping another popover trigger, or away from the popover should dismiss the popover.

Versions

Libraries:

  • BootstrapVue: 2.10.1
  • Bootstrap: 4.4.1
  • Vue: 2.6.11

Environment:

  • Device: iPhone
  • Browser: Chrome

Screenshot:

This screenshot demonstrates the behaviour occurring on the demo in the documentation at https://bootstrap-vue.org/docs/directives/popover/#dismiss-on-next-click-self-dismissing

DA879330-92BF-4DDB-8857-6BC90B5079AA

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Apr 5, 2020

Do you find the same issue happens with iOS Safari (as Chrome on iOS uses Safari as it's rendering engine)

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Apr 5, 2020

It might be because iOS versions of the browsers do not "focus" buttons when they are clicked, and hence the blur (focusout) event doesn't get fired on the trigger element (button) https://bugs.webkit.org/show_bug.cgi?id=22261

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Apr 5, 2020

@stevelacey
Copy link
Author

@stevelacey stevelacey commented Apr 6, 2020

@tmorehouse yep can confirm that fix works 🙌🏼

1065E7B7-BCB8-4FAC-A5DE-8CEB9B536FED

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment