Popover Focus Trigger not working in Firefox and Safari

[piperone]

http://jsfiddle.net/gPd9d/7/

Using Vanilla Bootstrap 3.0.3, the focus trigger-option for popovers does not appear to work in Firefox 25.0.1 and Safari 7.0 9537.71 (on OS X Mavericks). It works as expected on Chrome, though.

No errors output to console, so I don't know what's wrong.

Hiding popovers on 'unfocus' should be a (working) built-in feature in Bootstrap given its relative widespread usage, so I'm sure a fix to this would be much appreciated by many developers.

[Merg1255]

Win FF 25.0.1: When I click on the focus button the popover displays normally.

[piperone]

I can confirm that the focus-trigger indeed works on Windows versions of Chrome 31.0.1650.63 and Firefox 25.0.1. I also tested IE 11.0.9600 on a "real-world implementation" with success. The problem seems to be isolated to Firefox and Safari on OS X.

[mdo]

Also works in Chrome on OS X (but yes, not Safari).

[piperone]

I already stated that Chrome (Win & OSX) is not affected.

[mdo]

To be clear, you said:

Using Vanilla Bootstrap 3.0.3, the focus trigger-option for popovers does not appear to work in Firefox 25.0.1 and Safari 7.0 9537.71 (on OS X Mavericks). It works as expected on Chrome, though.

That parenthetical doesn't automatically mean OS X for Chrome, especially with your follow up regarding Windows browsers. Perhaps I could have inferred Chrome on OS X is fine from your comments, but I didn't, so my mistake.

Think of my reply as a confirmation from the project maintainer that things are indeed broke instead of being overly pedantic :).

<3

[piperone]

@mdo I apologize if my last post seemed pedantic and/or crass. I was on the move and quickly typed it on my iPhone. I, of course, really appreciate the prompt confirmation, so thank you! 👍 Keep up the fantastic work! :-)

[fat]

fixed, but you will want to add an explicit tabindex for the elements you want it to work on in safari

[piperone]

Unless I am doing something wrong, the focus-trigger-problem persists as of Bootstrap 3.1.0. I cannot get the trigger to fire using Firefox 26 or Safari 7.0.1 on OS X Mavericks. I also specified a tabindex for the element with the focus-trigger as suggested.

Here's an updated fiddle using Bootstrap 3.1.0:
http://jsfiddle.net/gPd9d/11/

[mdo]

Adding a tabindex per @fat's comment above doesn't work for me in latest Safari either.

[piperone]

I know that the popover isn't the most mobile-friendly Bootstrap component, but it is still worth noting that this behavior also exists on Mobile Safari on iOS 7.0.5.

[fat]

thanks @fredrkr appreciate the extra info :)

[fat]

hey guys… the jsfiddle works for me in safari… you just have to actually give the element focus (which is harder then it should be)… in safari you have to enable some preferences and a bunch of other dumb stuff to get focus on buttons. http://stackoverflow.com/questions/8747689/safari-tabbing-focus-doesnt-work-in-5-1-2

adding tabindex used to be a workaround… but looks like safari just is a hater these days

[piperone]

Hi again! I tried changing the preferences as described in the Stackoverflow-link above. Using my fiddle, the result, and only difference, is that if I press tab, the popover is shown. Nothing still happens if I actually click the button though. Shouldn't it also be focused when it's clicked? At least that's how it works in Chrome.

It would appear that Firefox is a hater also, since the problem exists on Firefox on OS X. Is anybody else able to confirm this? There is no equivalent Firefox-preference to the one mentioned on Stackoverflow; tab ends up doing nothing.

I've been staying tuned for an update on this issue for some time now. Frankly, I'm a little disappointed that the solution to this particular problem is for end users to start messing about in the preferences of their browser to get it to work properly. In any project I've been working on, that would be an unacceptable compromise.

I hope my comments aren't taken as ungratefulness, but rather as a (miniscule) attempt to make Bootstrap better. I really appreciate all the work being poured into Bootstrap! 😄

[cvrebert]

Works fine for me in Mac Firefox v28 without any tabindex.

[cvrebert]

Shouldn't it also be focused when it's clicked? At least that's how it works in Chrome.

FWICT based on some experimenting, Mac Safari v7.0.3 just plain doesn't seem to :focus buttons during/after they're clicked on. I didn't try playing with tabindex though.

Possibly relevant: http://bugs.jquery.com/ticket/7768

[piperone]

@cvrebert Just to clarify. Does it work hitting tab, clicking the button labelled Focus, or both?

It seems the source of this problem is as this guy Snover says it in the Jquery bug report linked to above:

Technically, certain elements don’t focus when they are clicked on, they just activate. This varies between browsers and operating system HIGs. (For instance, clicking a button in Mac OS never focuses it on any browser.) It’s not a bug.

I can confirm most of this statement having tested the fiddle Snover made (again from the Jquery bug report): http://jsfiddle.net/snover/32gXQ/3/

In Chrome on OS X, buttons do take focus when clicked. In Safari and Firefox they don't. No focus, ergo no popover triggering.

So, which of you guys will be joining me in Cupertino for a protesters march?

[cvrebert]

Sorry, to clarify, it works when tabbing to the "Focus" button in Mac Firefox; clicking doesn't work.
data-trigger="click focus" is probably your best option in Mac Firefox case.

[poojaja]

I have found same issue on Firefox 25.
Popover function is perfectly working on Chrome,IE and Firefox 30.
Kindly provide us some solution.

[cvrebert]

@poojaja See #14156.