could be a Tabs improvement

[hellfiremaga]

Hello everyone

For beginning : I'm not a React dev, nor a javascript dev. I'm a beginner so my problem might be evident and, if so, I'm sorry '^^

Ok so here's my situation : I have a docusaurus page with multible Tabs tag, but each TabItem has a unique value and an id in a h3 tag with the same name

If I load the page with the id of the h3 (page.html#myId), it works for the first tabitem, the one loaded by default. If I try to link to an inactive TabItem, the page stay at the top, like with an inexistant Id. I presume the tag does not exist, so it seems logical.

I tried multiple way to load the page with the "good" TabItem selected, but nothing works actually. I tried the useState with a javascript code that return the tabs code, but actually no solution comes to me.

Anyone has an idea ? maybe I'm just missing an evident function of the API ?

[Josh-Cena]

See #5343; this isn't a supported use case and "fixing" it is very hard.

[hellfiremaga]

almost the same problem.

I will look a bit further if any solution comes to me but with the answer, I guess I have to find a way around by myself...

[slorber]

We do have a solution based on query strings, not anchors.

This link will automatically open the iOS tab item:

https://docusaurus.io/docs/markdown-features/tabs?current-os=ios#query-string

[hellfiremaga]

@slorber you really are a life savior. Query strings are perfectly fine to me.

I'll try this solution when I'll be back on my computer

[hellfiremaga]

ok I confirm it works for my case, even with multiple Tabs. Here is how :

link the page
add QueryString to load the correct TabItem on the page
add the id included in the TabItem.

my link looks like that :
/docs/test/?fruit=Pomme#pomme

With a code looking like that :

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs queryString="fruit">
    <TabItem value="poire" label="Poire">
        <h3 id="poire">POIRE !</h3>
    </TabItem>
    <TabItem value="Pomme" label="Pomme">
        <h3 id="pomme">POMME !</h3>
    </TabItem>
</Tabs>

<Tabs queryString="123">
    <TabItem value="tulipe" label="Tulipe">
        TULIPE !
    </TabItem>
    <TabItem value="rose" label="Rose">
        ROSE !
    </TabItem>
</Tabs>

The id linking does not work on the localhost, but I don't mind. The most important is that it works for the web version

Totally works. Thanks for your help