-
-
Notifications
You must be signed in to change notification settings - Fork 530
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 <Tabs>
sync issue with inconsistent use of icon
on <TabItem>
components
#1811
Conversation
…<TabItem>` components
🦋 Changeset detectedLatest commit: fa9146f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the fix @HiDeoo! LGTM 🚀
* main: i18n(zh-cn): Update docs about synced-tabs (withastro#1834) i18n(zh-cn): Update some docs about withastro#1620 & withastro#1613 (withastro#1835) Add more diagnostic help to error messages thrown by `<Steps>` (withastro#1838) i18n(zh-cn): Update components.mdx (withastro#1836) i18n(zh-cn): Update community-content.mdx (withastro#1833) Improve type checking job (withastro#1831) [ci] format [ci] release (withastro#1832) i18n(ru): update ru.json (withastro#1826) Fix `<Tabs>` sync issue with inconsistent use of `icon` on `<TabItem>` components (withastro#1811) Enable `BASE_URL` tests (withastro#1828)
Description
This PR fixes an issue with synced tabs when
<Tabs>
sharing the samesyncKey
have<TabItem>
components that inconsistently useicon
or not.The issue is due to the fact that labels (which need to be identical for tabs to sync) were coming from the
textContent
property on the tab link which gets the content of all elements. In the presence of an icon, thetextContent
property could potentially include extra spaces due to the presence of the SVG icon.This pull request fixes the issue by using the
innerText
property instead oftextContent
to get the label text as it only returns the rendered text content, which is the exact label text we want to compare.