Deep linking of headings inside Tabs don't work

[Zenahr]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Given a deep-link to a heading via HTML anchor tags, the browser should focus the heading even if it's inside Tabs. This does not happen.

Reproducible demo

No response

Steps to reproduce

Given markdown like:

<Tabs groupId="network-config-scenario" queryString>
  <TabItem value="GSM">

## Configuring a GSM network connection

...

<TabItem />
<Tabs />

Expected behavior

Given a deep-link to a heading via HTML anchor tags, the browser should focus the heading even if it's inside Tabs.

Actual behavior

URI when selecting the Configuring a GSM network connection anchor: <...URL...>#configuring-a-gsm-network-connection (.e.g http://localhost:3000/documentation/Guides/Configuring/networking#configuring-a-gsm-network-connection) doesn't focus the heading, but instead opens the page at the top of the document.

Your environment

• Docusaurus version used: 2.3.1
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome, Version 110.0.5481.177 (Official Build) (64-bit)
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 10

Self-service

• I'd be willing to fix this bug myself.

[slorber]

#946
#5343
#8591

Going to close because it's not a bug: you should not use heading in tabs because we just don't support that (you'll end up with all the tabs headings in your TOC if you do)

Although this feature would be useful, it has to go through the regular process of a feature request, design phase, and implementation.

The feature would not only need deep linking but also have the ability to adjust the TOC to the currently selected tab, and doing so while preventing React hydration layout shifts. It's complex and not at the top of my todolist in terms of ROI so be ready to implement this yourself if you really want it 🤪 .

Stripe does it well: