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 Focus Trigger not working in Firefox and Safari #11788

Closed
piperone opened this issue Dec 9, 2013 · 19 comments
Closed

Popover Focus Trigger not working in Firefox and Safari #11788

piperone opened this issue Dec 9, 2013 · 19 comments

Comments

@piperone
Copy link

piperone commented Dec 9, 2013

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
Copy link

Merg1255 commented Dec 9, 2013

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

@piperone
Copy link
Author

piperone commented Dec 9, 2013

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
Copy link
Member

mdo commented Dec 9, 2013

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

@piperone
Copy link
Author

piperone commented Dec 9, 2013

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

@mdo
Copy link
Member

mdo commented Dec 9, 2013

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
Copy link
Author

piperone commented Dec 9, 2013

@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 fat closed this as completed in 394e0fa Dec 25, 2013
@fat
Copy link
Member

fat commented Dec 25, 2013

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

@mdo mdo mentioned this issue Dec 25, 2013
@piperone
Copy link
Author

piperone commented Feb 3, 2014

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/

@cvrebert cvrebert reopened this Feb 3, 2014
@mdo mdo added the confirmed label Feb 11, 2014
@mdo mdo modified the milestones: v3.1.1, v3.1.0 Feb 11, 2014
@mdo
Copy link
Member

mdo commented Feb 11, 2014

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

@mdo mdo modified the milestones: v3.2.0, v3.1.1 Feb 11, 2014
@piperone
Copy link
Author

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
Copy link
Member

fat commented Apr 9, 2014

thanks @fredrkr appreciate the extra info :)

@fat
Copy link
Member

fat commented Apr 9, 2014

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

@fat fat closed this as completed Apr 9, 2014
@piperone
Copy link
Author

piperone commented Apr 9, 2014

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
Copy link
Collaborator

cvrebert commented Apr 9, 2014

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

@cvrebert
Copy link
Collaborator

cvrebert commented Apr 9, 2014

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
Copy link
Author

piperone commented Apr 9, 2014

@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
Copy link
Collaborator

cvrebert commented Apr 9, 2014

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
Copy link

poojaja commented Jul 21, 2014

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
Copy link
Collaborator

@poojaja See #14156.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

6 participants