Active element does not target the same in test as in browser

[daBack]

Heyoh! :)

Issue:
When testing focus, we are dispatching keydown events, which triggers a focus change. This works all fine and dandy in the code and in our project. In the test however, the activeElement is not behaving as in the browser.

Example:

<AWebComponent>
  /* in aWebComponents shadowRoot below */
  <button></button>
</AWebComponent>

Expected behaviour:
The activeElement is in the code and the browser AWebComponent.

Actual behaviour:
In our tests, activeElement is button.

This makes it difficult to test the focus, since the logic in the component doesn't work for the test and it targets the wrong elements.
We believe that the activeElement in happy dom is always returning the lowest element in the hierarchy, in this case button, but the browser returns AWebComponent.

It would be awesome if the tests would return the same activeElement object. Is this something that's doable, or something that we have missed?

Regards,
Bäck

[capricorn86]

Thank you for reporting @daBack! 🙂

I will look into fixing this as soon as possible.

[capricorn86]

I have now fixed the issue 🙂

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v2.51.1

[capricorn86]

@daBack ☝️