Popover dismiss fails on touchscreens

[stevelacey]

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

[tmorehouse]

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

[tmorehouse]

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]

@stevelacey could you see if PR #5103 fixes your issue? https://deploy-preview-5103--bootstrap-vue.netlify.com/docs/directives/popover#dismiss-on-next-click-self-dismissing

[stevelacey]

@tmorehouse yep can confirm that fix works 🙌🏼