CODEWITHSUNDEEP
javascriptgoogle-chromefocusoutline
pushkin
pushkin

Reputation: 10209

Focus outline is invisible in Chrome when using a keydown handler to control focus

I have an <input type="text" />.

When I Shift+Tab from the textfield, I want to focus on an li > a. I can't rely on the native tabbing behavior in this case, because I have an anchor element in between the <input /> and the target <a /> that I don't want to give focus to.

Thus, I add a keydown listener that forces focus to the <a /> that I care about.

In Chrome however, when I focus on the <input /> and Shift+Tab from the <input />, focus goes to the last <a />, but the outline is invisible. If I do another Shift+Tab + Tab to land back onto B, I now see the outline.

document.getElementById("f").addEventListener("keydown", (e) => {
  if (e.key === "Tab" && e.shiftKey) {
      e.preventDefault();
      document.querySelector("#list1 > li:last-child > a").focus();
  }
});
<ul id="list1">
  <li><a href="#">A</a></li>
  <li><a href="#">B</a></li>
</ul>

<a href="#" />
<input id="f" />

If I remove the keydown handler and the anchor element in between the textfield and the target anchor that I want to focus, the focus outline is rendered correctly.

Is this a known Chrome bug, and are there any workarounds for this? (Using Chrome 74)

Upvotes: 0

Views: 240

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

You may consider removing e.preventDefault();, then wait a few milliseconds before setting the focus:

document.getElementById("f").addEventListener("keydown", function (e) {
    if (e.key === "Tab" && e.shiftKey) {
        setTimeout(function() {
            document.querySelector("#list1 > li:last-child > a").focus();
        }, 10);
    }
});
<ul id="list1">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
</ul>

<a href="#" />
<input id="f" />

Upvotes: 1

Titus
Titus

Reputation: 22474

You can prevent the other anchor from gaining focus using the tabindex attribute. Here is an example:

<ul id="list1">
  <li><a href="#">A</a></li>
  <li><a href="#">B</a></li>
</ul>

<a href="#" tabindex="-1"/>
<input id="f" />

This may not work in all browsers.

Upvotes: 1

Related Questions