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

I'm not getting the behaviour you describe on Windows using Google Chrome. After I release the click, the dotted line disappears. — Will Walsh
– Will Walsh, Commented Jun 4, 2021 at 3:11

Brian · Accepted Answer · 2021-06-04 03:18:53Z

2

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

edited Jun 4, 2021 at 3:18

answered Jun 4, 2021 at 3:10

Brian

5663 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to remove focus on button click in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related