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>