I have a Single Page Application built using React. As usual, when changing between pages, the rendered components changes.

Problem

If I navigate to a button using Keyboard and press enter, it switches the component as expected. However, I want the page to reset the keyboard position to the start of the page. I tried a few solutions, but no luck.

Solutions I've tried:

document.activeElement.blur()

or

document.body.focus()

I've spun up a codesandbox example to illustrate the situation.

Link for the sandbox: https://codesandbox.io/embed/affectionate-snow-ctxi9