bootstrap: Popover with `data-trigger="focus"` does not work on iOS Safari when used on without `class="btn"`

After #11788 and #14156 the popover with data-trigger="focus" is working very well. However, there is a super weird bug that only happens in iOS safari.

Consider the following 2 <a>, the only difference between them is class="btn".

  <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus"
      class="btn"
      data-content="...">
    Popover anchor w/ class 'btn'
  </a>

  <a tabindex="1" role="button" data-toggle="popover" data-trigger="focus"
      data-content="...">
    Popover anchor w/o class 'btn'
  </a>

The problem is, popover works fine for the first <a>, but not the second.

Hope the recording below will help better illustrating the problem:

Demo Plunker: http://embed.plnkr.co/M0NIAPtXOet8ppl2dShP/preview (Please open using iPhone or iOS simulator. OSX Chrome, Android Chrome, OSX Safari, OSX Firefox works perfectly on both <a>s.)

It seems that the focus event is somehow not triggered in iOS Safari. When I put a breakpoint in the focus event callback, the first <a> invokes the callback as expected while the second <a> does not.

No idea why this happens ._.

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 22 (8 by maintainers)

Commits related to this issue

Merge pull request #15947 from patrickhlauke/ios-click-fix-role-button iOS fix for role="button" elements; [fixes #15935] — committed to twbs/bootstrap by patrickhlauke 9 years ago

Most upvoted comments

@patrickhlauke <button> isn’t an option because of fucking Safari: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Button#Clicking_and_focus Way ahead of you on that last thing: https://github.com/necolas/normalize.css/pull/379

cvrebert on Feb 28, 2015

@DavidVII That’s a very different problem. As already mentioned in the docs, tabindex is always required for dismiss-on-next-click popovers.

cvrebert on Mar 23, 2015

Confirmed on iOS 8.1. Without .btn, you need the href="#". .btn doesn’t strictly need the href on account of its own cursor: pointer. As not using .btn is legitimate, I’m just going to add href="#" for the sake of genericity & simplicity, effectively reverting #15277, which was only a very minor nice-to-have anyway.

It seems that the focus event is somehow not triggered in iOS Safari

Yes, iOS Safari is stingy/quirky about elements being clickable/focusable; see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile

cvrebert on Feb 28, 2015