Why Does Document.activeElement Produce A Different Result On Mac Using Firefox

I have the following code; When clicking the button on Linux or Windows (either Chrome or Firefox), the output in the console is the However on Mac Fir

Solution 1:

This indeed sounds like a bug, and you did the right thing opening this ticket.

If you absolutely need to rely on this for your code, one hack would be to track yourself the activeElement.

The :active pseudo-class is correctly set, so we can exploit this in order to keep track ourselves of the activeElement.

We can add a really fast CSS transition on the elements we are trying to track and then listen for their transitionend events in order to handle when they become or stop being active. Their state can be checked by checking if they match the :active pseudo-class at the moment the transition ended.

Then when you'll need to retrieve the document.activeElement, you'll just have to first check if your own activeElement variable holds something, and only otherwise fallback to the browser's reported one.

Also, since this bug seems to only affect buttons Elements, we can add this hack only on these elements:

let activeElement;
document.addEventListener('transitionend', function(e) {
  // if the target is currently active, it is the activeElement
  activeElement = e.target.matches(':active') ? e.target : null;
});


document.addEventListener('submit', function(e) {
  e.preventDefault();
  // first try to get our own activeElement
  // otherwise default to the document's one
  console.log('in submit', activeElement || document.activeElement);
  });
// to show the default one still works
document.addEventListener('click', function(e) {
  console.log('in click', activeElement || document.activeElement);
});

input,button { /* target only buttons UIs */
  transition: opacity 0.000001s; /* a really fast transition */
}
input:active,button:active {
  opacity: 0.999; /* a property barely noticeable */
}

<form action="/" type="POST">
  <label>Enter text: </label><input type="text">
  <button type="submit" tabindex="0">submit</button>
</form>
<a href="#">click me</a>