Consider this input – we blur on pressing enter.
It normally works. But if you open Devtools, so the debugger line works, then !!blur never fires – even though the element loses focus!
Why, what’s going on?
And is there a way to get a reliable blur event?
(It’s not just Devtools/debugger – there seem to be other cases where this can happen, such as if the window is out of focus, but I haven’t dug deep enough yet to have anything concrete to report here.)
document.querySelector('input').addEventListener('blur', () => console.log('!!blur'));
document.querySelector('input').addEventListener('focus', () => console.log('!!focus'));
document.querySelector('input').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
console.log("!!enter");
debugger;
e.target.blur();
}
});<input>
<p>Try compare opening / closing devtools and pressing enter - !!blur is missing when open!</p>