DOM events are not fired after disabling element in Firefox

user_4960726 0
Viewed 225

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>

firefox dom-events javascript
1 Answers

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

user_49607260
Related