0

I'm trying to replicate Chrome's default outline styling that occurs when one focuses on a button element with an anchor element that I'm using as a link button. Since link buttons do not have that default outline styling that regular buttons have, I'm using onFocus and onBlur to set an outline state -- which will be used to trigger the outline styling. I'm using a ternary operator in the style attribute to display the outline, depending on whether the user has focused on the anchor element.

At the moment, the styling does not appear when the user focuses on the anchor element. However, if I were to set '5px auto -webkit-focus-ring-color' as the outline value in the false condition of the ternary operator, it appears when the user doesn't focus on the anchor element. If I were to leave the general ternary operator structure as it is in the code shown below, but change auto to solid or dotted, the outline is visible during a focused state. I'd appreciate it if anyone could explain why the outline doesn't appear when I use auto in the outline value in the true condition of the ternary operator. Here's a sandbox with the code. The following is my code:

const [outlined, setOutlined] = useState(false);
const onFocus = () => {
  setOutlined(true);
};
const onBlur = () => {
  setOutlined(false);
};

return (
  <div className="App">
    <h1>Hello CodeSandbox</h1>
    <a
      href="https://www.stackoverflow.com"
      onFocus={onFocus}
      onBlur={onBlur}
      style={{ backgroundColor: '#f44336', color: 'white', padding: '14px 25px', outline: outlined ? '5px auto -webkit-focus-ring-color' : 'none' }}
    >
      Swag
    </a>
  </div>
);
Roger Cooper
  • 178
  • 2
  • 19
  • 2
    Why are you using component state for this? Why not use the [CSS :focus](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus) selector? BTW, your sandbox link is the React template project. – ray Jun 03 '21 at 22:59
  • @rayhatfield I thought that you can't use pseudo-classes in ReactJS, so that's why I went about it the way I did -- based on this: [https://stackoverflow.com/a/64709645/11622350](https://stackoverflow.com/a/64709645/11622350). Thanks for the catch! – Roger Cooper Jun 03 '21 at 23:04
  • The whole why-not-use-CSS issue aside, your code works just fine for me as-is (Chrome v90 on Windows), so maybe there's some other issue going on. Is your real code not quite so simple as what's in the question here, perhaps? – cjl750 Jun 03 '21 at 23:10
  • @cjl750 Just to clarify, when you focus on the link button, do you see an outline appear? That's really interesting if that's the case, because the outline isn't showing up on my end. My real code is nearly identical to what's going on here. I'm also running this in Chrome v90 on Windows & Mac. – Roger Cooper Jun 03 '21 at 23:18
  • Yeah, the outline shows up just fine when I focus and then goes away when I blur, as expected. I would say it's possible you just can't see the color, but you said it works when you invert the ternary, right? So not sure what else to tell you there... – cjl750 Jun 03 '21 at 23:22

0 Answers0