Tabs component and Search not working together

[kieranblack]

What version of starlight are you using?

0.31.0

What version of astro are you using?

10.9.2

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Safari

Describe the Bug

• Using Tabs and TabItem components that come with Starlight.
• Using PageFind

Problem:
Search results don't navigate to the correct tab that has the content from the search result

How to replicate:

1. Use Tabs and TabItems components to create content in multiple tabs.
2. Search for content that would be in any other tab except the first tab.
3. The search results should render as expected
4. Click on the link for a result that would be in any other tab except the first tab.
5. The tab will not change to the correct tab to view your searched content

Participation

• I am willing to submit a pull request for this issue.

[delucis]

Thanks for the issue @kieranblack. I think this is working as intended currently: we don’t have a way to know if a navigation comes from a search click (or if we did, what content was the target) or if it’s just a regular navigation.

It might be possible to support for cases where there is a subheading inside a tab because theoretically we could detect if there’s a fragment link that should be shown (e.g. navigating to /example#inside-tab could check if #inside-tab is in a hidden tab and reveal it), but that would be a somewhat limited use case as often there are no subheadings in tabbed content, so I’m not sure that partial support would be desirable.

Given we currently document tabs as being designed “for grouping equivalent information where a user only needs to see one of several options,” I think I’ll convert this to a feature request to see if it’s a common need, so we can consider whether there are technical solutions (it would require work likely both in how the tab HTML is structured and perhaps in how search results are indexed to ensure tab content could be targeted reliably).

[kieranblack]

Definitely understandable for it to not be a bug fix.

I'm currently using Tabs and Tab Items as a secondary navigation (on page). I've written a little .js to switch tabs on document load and hash change but you're right it does rely on having H2s or lower inside the content of the Tab Items for PageFind to work. Also if you are using client-side generated content, having a header above it in plain .mdx format works too.