Carbon: Tabs component makes page scroll jump

[diego-codes]

What package(s) are you using?

• [ ] carbon-components
• [x] 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

[emyarod]

I believe the storybook you are referring to is outdated compared to https://carbon-components-react.netlify.com/?path=/story/tabs--default. in your CodeSandbox example, changing tabs doesn't seem to move the tabs off of the screen unlike what's being shown in the recording of your application

related https://github.com/carbon-design-system/carbon/pull/7045 and https://github.com/carbon-design-system/carbon/pull/6989

[diego-codes]

The netlify storybook shows the same behavior as above where selecting a new tab jumps the scroll position of the entire page.

[diego-codes]

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

[emyarod]

The Netlify link should only be scrolling if the tabs are not fully in the viewport. Is that what you are seeing?

the Carbon website is not using the latest version of the library which should contain the bugfixes I referenced

[diego-codes]

Yes, even when the tab is fully visible, it scrolls the page, so it is at the top of the viewport hidden by the platform shell.

I just realized that Carbon for IBM Security is on [email protected]. Do you think that by upgrading to [email protected] it will be fixed?

[emyarod]

just to clarify, I mean the demo here should not be scrolling unless the tabs are not fully in the viewport, is that what you are seeing as well?

as for your application/Carbon for IBM security, it would need to be on [email protected] to contain the bugfixes. The stable 10.23.0 release should be coming tomorrow (Oct 29)

[emyarod]

FYI the Carbon website has been updated to include the fixes, and the fixes have been released in v10.23.0

[diego-codes]

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