CODEWITHSUNDEEP
javascriptreactjs
user944513
user944513

Reputation: 12729

how to remove focus on button click in react?

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

enter image description here

Upvotes: 0

Views: 4235

Answers (1)

Brian
Brian

Reputation: 556

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

Upvotes: 2

Related Questions