Menu
I am developing a simple game where the user clicks the 'Start' button, the button is disabled and after that user performs some actions on the canvas using an arrow keyboard. It works as expected in Chrome but I observed a strange behaviour in Firefox. Namely, after disabling the button, 'keydown' events are not fired on the page until I click somewhere on it. It looks like after disabling the button, the page loses focus or something.
Is this behavior according to specifications, or is it a Firefox DOM event dispatching bug?
Firefox 64.0, Ubuntu
const button = document.querySelector('button');
const canva = document.querySelector('.canva');
const doc = document.documentElement;
doc.addEventListener('keydown', evt => {
canva.innerHTML = evt.key;
});
button.addEventListener('click', evt => {
button.disabled = true;
});body {
font-family: sans-serif;
margin: 0;
background-color: #F4511E;
}
button {
display: block;
text-align: center;
width: 100px;
margin: 10px auto;
}
.canva {
background-color: white;
width: 200px;
height: 200px;
margin: auto;
font-size: 1.5em;
font-weight: bald;
line-height: 200px;
text-align: center;
}<!doctype html>
<html>
<head>
<title>Lost events</title>
<meta charset="UTF-8">
</head>
<body>
<button>Start</button>
<div class="canva"></div>
</body>
</html>
757
asked Oct 12 '25 13:10
Button gets focus and becomes document.activeElement after click. After disablind it is automatically blur()-ed in Chrome, but in Firefox it continues to be activeElement and eats events like a black hole. So, it is necessary to explicitly call document.activeElement.blur() after disabling activeElement
Thanks to @Kaiido for his comment
There is an issue in Firefox bugtracker about that https://bugzilla.mozilla.org/show_bug.cgi?id=706773
130
answered Oct 14 '25 04:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With