[Bug]: Tabs do not have left scroll button when scrolled to the right side

[dabrad26]

Package

carbon-components, carbon-components-react

Browser

Safari

Package version

10.43.0, 7.43.0

Description

When a user scrolls tabs the left scroll arrow does not appear unless a resize event happens to the page (when the scroll position for the tabs is not 0 on the left).

I found that using older React (like Sandbox defaulted to) worked but would throw a ton of errors. Using latest react (17.0.2) did not have errors but did not show the arrow unless I resized.

See recording here:

Project reference: IBM Aspera

CodeSandbox example

https://codesandbox.io/s/sleepy-ardinghelli-y8pry

Steps to reproduce

Scroll list with either the right arrow or a trackpad. The left arrow does not appear when content goes off screen. However, a resize event of window will trigger it to appear.

Expected: The arrow appears as soon as Tabs container is not left scrolled at 0.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

I suspect this is related to the changes to the onScroll synthetic event in React v17

Starting with React 17, the onScroll event does not bubble in React. This matches the browser behavior and prevents the confusion when a nested scrollable element fires events on a distant parent.

This also potentially explains why it works in the storybook, it's using React 16.

Here's a nice succinct post on the situation. I think we could try moving the onScroll from the wrapping div to the child ul

[dabrad26]

I am seeing an issue with this fix. Now when I scroll tabs left or right a few times the app crashes (this test app does not have an onError catcher like our prod apps).

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

The above error occurred in the <Tabs> component:

Tabs@https://localhost:3001/Aspera/aspera-starter/static/js/vendors~main.chunk.js:270510:81
div
AsperaTabs@https://localhost:3001/Aspera/aspera-starter/static/js/main.chunk.js:15900:10
withRouter(AsperaTabs)@https://localhost:3001/Aspera/aspera-starter/static/js/vendors~main.chunk.js:447428:36
div

[joshblack]

Thanks so much for the heads up, @dabrad26. I went and changed our latest tag to point to the previous stable release until we can hotfix this on Monday.

[mateBe95]

The issue still occurs ... carbon components 7.54 version
crashes on this line in componentDidUpdate
if (
tablistClientWidth !== currentStateClientWidth ||
tablistScrollLeft !== currentStateScrollLeft ||
tablistScrollWidth !== currentStateScrollWidth
) {
this.setState({
horizontalOverflow: tablistScrollWidth > tablistClientWidth,
tablistClientWidth,
tablistScrollLeft,
tablistScrollWidth,
});
}
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

[tay1orjones]

@mateBe95 I can't remember if we chatted on slack or not - if not, could you open a new issue for this and include a sandbox reproduction? Thanks!

[mateBe95]

The issue still appear whenever user resize instead of scrolling @tay1orjones
"carbon-components": "10.58.7",
"carbon-components-react": "7.59.8",