How to remove focus from button after click?

I completed Javascript Calculator project.
It works and pass tests, but I want the user to be able to use the keyboard as well.
I implemented event listeners, but there is one small problem. For example, when the user clicks with mouse on ‘1’, ‘2’, ‘+’, ‘3’, ‘5’, ‘9’ and then press enter, expression is evaluated on background, but because the ‘9’ button is still focused, the result is overwritten by a 9.

So how do I remove a focus from a button after clicking on them?

Code: https://codepen.io/Agn-c/pen/LYbgxMM?editors=0010

In your Button component at the end of handleKeyPress add e.target.blur()

1 Like

Users who can not see and rely on what elements have focus when using a keyboard, will be confused by removing the focus as suggested. See this article for how to potentially keep your calculator accessible for such users.

Most of the browsers support this now:

:focus-visible