Focus outline doesn't appear when focused programmatically?

Question

if I have a <div tabindex="1" id="mydiv">content</div> I can click on it, it will show an outline, and document.activeElement points to this element.

However, if I run document.getElementById('mydiv').focus() then the element appears in document.activeElement but does not show the outline.

How can I make it show the outline when focused programmatically? I'd prefer not to use a class I juggle around to style the outline into existence, as I'd like it to go away whenever the user takes any action that would blur it.

It appears to work here - http://jsfiddle.net/e6vtm75h/ Edit: Seems to work in Chrome; not Firefox. — Josh Crozier, Jan 14 '15 at 01:48

score -1 · Answer 1 · answered Sep 12 '21 at 03:29

I did it this way.

const element = document.querySelector(".the-element-you-wanna-focus-on")
element.focus()

.the-element-you-wanna-focus-on {
  &:focus,
  &:focus-visible {
    outline: auto 2px Highlight;
    outline: 5px auto -webkit-focus-ring-color;
  }
}

What is -webkit-focus-ring-color?

Focus outline doesn't appear when focused programmatically?

1 Answers1