Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

13.7.0 regression broke .matches(':focus-visible') during focus events #1515

Closed
EvHaus opened this issue Aug 28, 2024 · 2 comments · Fixed by #1520
Closed

13.7.0 regression broke .matches(':focus-visible') during focus events #1515

EvHaus opened this issue Aug 28, 2024 · 2 comments · Fixed by #1520
Assignees
Labels
bug Something isn't working

Comments

@EvHaus
Copy link

EvHaus commented Aug 28, 2024

Describe the bug

After upgrading from happy-dom 13.6.2 to 13.7.0, we're seeing a problem with focus events. At first I thought maybe it was the same issue as #1409, but I tried with 13.10.2, 14.x.x and 15.0.0 and it is still broken there too.

To Reproduce

const div = document.createElement('div');
div.id = 'test-element';
div.addEventListener('focus', (event) => {
  console.log('focused!');
  
  // BUG: In 13.6.2 this returns `true` but after 13.7.0+ it returns `false`
  // Browsers return `true` here.
  console.log('matches :focus-visible?', event.target.matches(':focus-visible'));
});

document.body.appendChild(div);
document.getElementById('test-element')?.focus();

Expected behavior

Focus events should set the element as matching the :focus-visible.

@EvHaus EvHaus added the bug Something isn't working label Aug 28, 2024
@capricorn86 capricorn86 self-assigned this Aug 29, 2024
capricorn86 added a commit that referenced this issue Aug 29, 2024
#1520)

* feat: [#1515] Adds support for the selectors :focus and :focus-visible

* chore: [#1515] Attempts to fix flaky unit tests
@capricorn86
Copy link
Owner

Thank you for reporting @EvHaus! 🙂

These selectors where actually not supported in v13.6.2. There was a bug which made the pseudo selector to match when it did not recognize the pseudo selector.

I have added support for :focus and :focus-visible now. However, :focus-visible will be considered a match for any focused element, as Happy DOM can't differentiate between tabbed elements and input field focus etc. right now.

You can read more about the release here:
https:/capricorn86/happy-dom/releases/tag/v15.6.0

@EvHaus
Copy link
Author

EvHaus commented Aug 30, 2024

Thanks for the super fast response!

However, :focus-visible will be considered a match for any focused element, as Happy DOM can't differentiate between tabbed elements and input field focus etc. right now.

That seems perfectly reasonable to me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants