how to remove focus on button click in react?

Question

I am trying to remove focus on button click.Actually in my css it is written this

button:focus,
a:focus {
  outline-offset: 2px;
  outline-width: 2px !important;
  outline-style: dotted !important;
  outline-color: currentColor;
}

when I click on button it focus my button here is my code https://codesandbox.io/s/new-snow-x8fih?file=/src/App.js

I have already tried blur event

function handleProductNavigation(event) {
    btnRef.current.blur();
    console.log(btnRef.current.blur);
    //event.currentTarget.blur();
    //props.onChange(event, '0E3B648885C24A02B5B2676BEB82C7E9', '', 'rc20p2-open');
  }

after click it look like this

Answer 1

Your blur works as intended and the outline goes away after the click. But if you don't want to show it at all when clicking and only show it for tab-focus there is a :focus-visible pseudo-class which is basically keyboard-only-focus and it has reasonable browser support.

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible