JavaScript return tab order to top of the page after blur event

Instead of using blur, just set the tabindex of the form to -1 and focus it. Here's a vanilla JS example, which you can adapt with a ref in React.

const form = document.querySelector('form');

document.querySelector('#next').addEventListener('click', (ev) => {
  // Instead of blurring:
  // ev.target.blur();
  
  // Focus the form:
  form.focus({preventScroll: true});
});

button,
form {
  border: 2px solid black;
  margin: 0.2rem;
  outline: none;
}

*:focus {
  border-color: red;
}

<form tabindex="-1">
  <button id="next" type="button">Next</button>
</form>
<footer>
  <button>Unrelated button</button>
</footer>

Source : stackoverflow.com