Tabs component makes page scroll jump

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you’re having.

The Tabs component makes the page jump when the user clicks on a tab so the tab is placed at the top of the viewport. This causes a problem because our platform shell header ends up covering the tabs when clicked.

Is this issue related to a specific component?

Yes, the Tabs component

What did you expect to happen? What happened instead? What would you like to see changed?

It is expected that selecting a tab on the Tabs component does not change the user’s scroll position.

What browser are you working in?

Google Chrome Version 86.0.4240.111 (Official Build) (x86_64)

What version of the Carbon Design System are you using?

Carbon Components React 7.22.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Cloud Pak for Security release in mid-November

Steps to reproduce the issue

1. Go to the Tabs Storybook preview
2. Adjust the preview viewport size so that the content is vertically scrollable with a combination of making the browser window short and increasing the size of the preview
3. Scroll the preview viewport so that the Tab buttons are partially visible
4. Click on any Tab button
5. Notice that the scroll position jumps to place the clicked Tab button at the top of the viewport

Please create a reduced test case in CodeSandbox https://codesandbox.io/s/wonderful-bassi-uzdi2?file=/src/index.js

Additional information

[diego-codes]

Great! Thanks, @emyarod. I think I have enough information to move forward. I will close this issue.

[diego-codes]

You can even see the same behavior on this demo page: https://www.carbondesignsystem.com/components/tabs/usage/