Focus outline not shown when set on anchor programmatically

Question

I have an application that is programmatically setting focus on elements in certain situations. Mostly it all works fine, but when I set the focus on an anchor, e.g. $("#link1").focus(), I don't see the focus outline in Firefox (v42.0). The focus IS on the element as I can tab to the next and see the outline. When I then tab back, I see the outline on my original element correctly. It works correctly on Chrome and IE.

If, after setting the focus, I switch to another tab in Firefox and back, the outline is shown.

It looks like the element isn't getting refreshed correctly when I call focus().

The HTML and JS/jQuery are pretty simple:

<a href="#" id="link1">Link 1</a>
<a href="#" id="link2">Link 2</a>

$("#link1").click(function(evt){
  evt.preventDefault();
  $("#link2").focus();
});

Anyone have any ideas?

http://jsfiddle.net/4xkh9y1o/1/

Thanks,

Steven

Could you edit this question and post the code you are using? — Branden Keck, Dec 11 '15 at 12:33
http://stackoverflow.com/questions/7046798/jquery-focus-fails-on-firefox — Shekhar Pankaj, Dec 11 '15 at 13:12
This sort of solution doesn't seem to work for me. http://jsfiddle.net/4xkh9y1o/ — steven_g, Dec 14 '15 at 10:02

s0ma7 · Accepted Answer · 2016-01-05T23:07:22.043

I encountered the same issue, and best I can tell this is a browser bug. It appears that until Firefox has rendered a focus outline that is not programmatically triggered, it will fail to display the outline for programmatically triggered focus. Once an outline has been displayed, focus outlines will display for programmatically triggered focus as well.

Note that this is not limited to anchor elements. In my case it is occurring on <div tabindex="0">.

I did find one workaround: specify explicit styles for the focus outline:

.programmatically-focused:focus {
    outline: 1px dotted;
}

To avoid clobbering default focus ring styles in other browsers, you may want to limit the workaround to Firefox:

@-moz-document url-prefix() {
    .programmatically-focused:focus {
        outline: 1px dotted;
    }
}

This style seems to match FF's built-in focus outline in my environment (FF 43.0.1 on Win7). Based on this page, it appears that FF Mac uses the same style. It uses the current text color for the outline.

Here's an update to your fiddle with the workaround in action: http://jsfiddle.net/4xkh9y1o/4/

Focus outline not shown when set on anchor programmatically

1 Answers1