Tabs render incorrectly on server

[joshuajaco]

🐛 Bug report

Current Behavior

When rendered on the server all tabs are shown, regardless of the index prop.

Expected behavior

Only the tab for the active index is shown.

Reproducible example

https://codesandbox.io/s/reverent-sun-w205d

Additional context

We are using the Tabs inside a remix app. Since the server shows all tabs, but on client side they are hidden, the content jumps.

Your environment

Software	Name(s).	Version
Reach Package	Tabs	0.16.4
React		17.0.2

[joshuajaco]

Possibly related to #624

[chaance]

This is a known limitation of how we automatically track indices, which require a second render pass. To prevent the jump you'll need to pass an index prop to each Tab and its corresponding TabPanel component.

See #624 (comment)

[joshuajaco]

This is a known limitation of how we automatically track indices, which require a second render pass. To prevent the jump you'll need to pass an index prop to each Tab and its corresponding TabPanel component.

See #624 (comment)

I still get the same behaviour (all tabs are rendered on the server) after adding the index prop to all Tabs and TabPanels: https://codesandbox.io/s/gracious-pare-urlj5j

[HuyAms]

Is there any fix/ around to this issue yet?

[martinmckenna]

bumping. looking for a working solution here as well