slorber
commented
7 months ago An url with a tab query string parameter is not supposed to scroll to the tab.
Please consider that a page might contain many tabs with the same option, and Docusaurus can't guess to which tab in the page you want to scroll to.
If you want to scroll and browse a specific tab, you have to use both an anchor and a querystring param.
Example: https://docusaurus.io/docs/markdown-features/tabs?current-os=ios#query-string
This is the intended behavior.
This means the user must select the anchor for the containing header, to add that header to the URL, then select a tab, to add the selected tab to the URL, then the link does scroll. It's not intuitive to expect users to do this.
IMHO this is not really an UX users would expect anyway, and is more likely to be used by site authors that understand how all this works. Those site authors must understand that they should be explicit and define precisely where the link should land in terms of heading/anchor + tabs being rendered, which is what we do.
If you see another doc site that has a more intuitive behavior than ours, please show us some examples and we'll take this into consideration.
Even the Stripe docs does not do that, despite using tabs extensively: https://stripe.com/docs/payments/checkout/custom-domains?verify-with=web&nameserver-provider=cloudflare
Note we can have multiple tab params in the query-string, and it's impossible to guess to which tab we want to scroll to in this case, apart picking a random tab.
At best I'd be willing to consider adding a <Tabs id="my-id"/> prop (new feature)
We could add the anchor to the url when a tab gets selected.
This would resolve the ambiguity in case of multiple tabs using the same queryString param:
<Tabs queryString="current-os" id="tab-1">
<TabItem value="android" label="Android">
Android 1
</TabItem>
<TabItem value="ios" label="iOS">
iOS 1
</TabItem>
</Tabs>
<Tabs queryString="current-os" id="tab-2">
<TabItem value="android" label="Android">
Android 2
</TabItem>
<TabItem value="ios" label="iOS">
iOS 2
</TabItem>
</Tabs>Let me know if that would be good enough to solve your problem.
mhowes-veracode
rcarteraz
Have you read the Contributing Guidelines on issues?
Description
Adding a query to a tab allows the user to add a selected tab to the URL, as explained here: https://docusaurus.io/docs/markdown-features/tabs#query-string
But, clicking that URL does not scroll down the page to the selected tab. This means the user must select the anchor for the containing header, to add that header to the URL, then select a tab, to add the selected tab to the URL, then the link does scroll. It's not intuitive to expect users to do this.
Has this been requested on Canny?
No response
Motivation
Improve UX around how users expect to link to a selected tab.
API design
No response
Have you tried building it?
No response
Self-service