javascripthtmlcssbutton

Remove button focus state after click

I'm trying to remove the focus state of a button once it is clicked. The issue is once I click a button and after that instead of clicking on anywhere else if I just press ENTER the click event on that button works again.

button focus issue

I tried adding outline: none to the CSS but this is not removing the actual functionality of the button on focused state.

What can be the solution for this?

function test() {
  console.log(1)
}
/** Many solutions mentioned this but this is just removing the view state */

button {
  outline: none
}
<button type="button" onclick="test()">Click</button>

Solution

  • You can blur focus by calling following inside test fn -

    <script>function test() { console.log(1); document.activeElement?.blur?.(); }</script>