Tabs component scrolls tabs into view on click, no way to stop this behaviour

[gptt916]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

When using the tabs and tab component, selecting on a tab (click or keyboard) the component will scroll the window such that the tabs component is at the top.

Is this issue related to a specific component?

Tabs, tab

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

This causes unwanted behaviour in my usecase, there should be a way to turn this off, perhaps via a boolean prop.

What browser are you working in?

Firefox, chrome

What version of the Carbon Design System are you using?

Latest for all packages (x.21)

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

IBM Cloud Docs

Steps to reproduce the issue

1. Go to https://react.carbondesignsystem.com/?path=/story/tabs--container
2. Open the storybook addons panel (Keyboard press 'A', or via the storybook menu)
3. Drag the addons section such that it covers half the container portion
4. Scroll the panel such that it's at the very top (i.e. showing a gap between the tabs and the top of the storybook container)
   
5. Click on the 2nd tab, it is now scrolled to the top
   

Additional information

This line here is causing the issue: https://github.com/carbon-design-system/carbon/blob/master/packages/react/src/components/Tabs/Tabs.js#L232

Looks like it's scrolling both x and y axis when it should only be scrolling x. I can open a PR to fix if needed.

[starpit]

This is still an issue for us. If anything, the fix #6974 makes it worse (see my next comment for a demo of the worsened behavior). Any use of scrollIntoView will vertically scroll, it's only a (not difficult) matter of finding the right placement of elements on the page.

I'm pretty sure that this bug would be truly fixed if you switch to scrollIntoViewIfNeeded from the current scrollIntoView. I realize that the proposed API is not universal (notably absent is Firefox). Hence this: https://www.npmjs.com/package/scroll-into-view-if-needed

What I have done in this gif: first, I click around tabs with the element scrolled to the top of the viewport. No problem. And #6974 actually made this part better. However, once I scroll down a bit, switching tabs causes a vertical scrolling event. This can be highly problematic, because it may cause the content of the tab to go from on-viewport to fully off-viewport (see the next comment for a gif of that behavior).

[starpit]

Here is a second gif that shows the catastrophic case: to start, the tab content is fully in-viewport, whereas upon clicking on a tab, the tab content scrolls to be fully off-viewport!

What I have done in the gif: first, I demonstrate that I am scrolled to the bottom of the viewport. Then I click on a tab, and observe the vertical scrolling event that pushes the tab content off-viewport to the bottom.

Prior to #6974 the problem was annoying. With #6974, you get these kinds of "catastrophic" situations, where the tab content move to fully off-viewport. That is, prior to #6974, no test failures, just sub-optimal behavior. With #6974 we get test failures.