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

Fix: Nested tab groups broken in v2.19.1 #2367

Open
wants to merge 3 commits into
base: next
Choose a base branch
from

Conversation

schilchSICKAG
Copy link
Contributor

This PR fixes #2320 by getting rid of the problems introduced by the Synergy Team with the fix #2299.

The problem was that the mutation observer was never scoped in the first place, using subtree checks to adjust itself even when children updated properties that both tabs and the children share.

This original Problem went unnoticed: The mutation observer originally checked its subtree completely, too.

This leads to the following errors:

  • When updating an aria label in a slotted component, the mutation observer would run and update the tabs aria labels. As this is behind the scene, no one ever noticed it.
  • When updating any slotted component that have a disabled or active prop, it will also fire the mutation observers logic.

The error became more apparent when we tried to fix the active property, because naturally, it is shared in both instances of SlTabGroup, making the navigation change of the children group cause a mutation update on the parent :(.

With this PR, I tried to:

a) Make sure to hold the original logic for the mutation observer
b) Scope the changes to the first level of mutations by not directly querying the original mutations anymore.
c) Restrict the amount of events for children attribute changes by filtering those we are interested in to make it a little more performant.

On a sidenode, I have not fully understood why we are using a subtree check at here at all, but there may be reasons it can be beneficial (e.g. when you have some DOM nodes wrapping the tabs or tab-groups), so I did opt to not change this, too.

Copy link

vercel bot commented Feb 7, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
shoelace ✅ Ready (Inspect) Visit Preview Feb 10, 2025 1:23pm

@schilchSICKAG
Copy link
Contributor Author

Just had another look onto the functionality and noticed that I have read the code wrong. The aria labels should be updated when there is no aria-labelledby or aria-controls provided. I have adjusted the attribute list, but still I think it would be better to scope the mutation observer on the direct children and proceed from there for easier logic.

@claviska claviska added the fixed-in-wa This issue has been fixed or isn't relevant to Web Awesome. label Feb 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
fixed-in-wa This issue has been fixed or isn't relevant to Web Awesome.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Nested tab groups broken in v2.19.1
2 participants