Package

@carbon/react

Browser

Chrome

Package version

v1.101.0, v1.104.1

React version

v17.0.2

Description

The right scroll navigation button in a scrollable TabList is being disabled prematurely when the last tab is only partially visible in the viewport. The button should remain enabled until the last tab is fully visible, but currently disables as soon as any part of the last tab enters the viewport.

Reproduction/example

https://stackblitz.com/edit/vloqeb42?file=src%2FApp.jsx

Steps to reproduce

Steps to Reproduce

1. Create a TabList with scrollable={true} prop
2. Add enough tabs (8-10+) so they overflow the container width
3. Scroll horizontally until the last tab is visible
4. Click on scroll left button, the last tab (here "Ingresses") becomes only partially visible.
5. Observe that the right scroll button becomes disabled/hidden
6. Note that you cannot scroll further to see the complete last tab

This effects a full screen chrome (with 100% zoom)browser in Windows laptop
System Resolution: 3840 x 2400
Scale: 250%
Chrome version: 146.0.7680.165 (Official Build) (64-bit)

Expected Behavior
The scroll button should:

• Remain enabled and visible when any tab content is cut off or partially hidden
• Only disable when scrollLeft + clientWidth >= scrollWidth (i.e., scrolled to the absolute end)
• Allow users to scroll until the last tab is fully visible in the viewport

Actual Behavior
The scroll button:

• Disables when the start of the last tab enters the viewport
• Prevents users from scrolling to see the complete last tab
• Leaves the last tab partially cut off with no way to scroll further

[ Attached the screenshot from product screen, where Tabs component is used and also from stackblitz ]

Root Cause Analysis

setIsNextButtonVisible(
ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth + 1 < ref.current.scrollWidth : false
);

Issue: The calculation scrollLeft + buttonWidth + clientWidth + 1 < scrollWidth checks if there's ANY remaining scroll width, but doesn't verify if the last tab is fully visible. This causes the button to disable when the last tab is only partially in view.

The logic should ensure the button only disables when we've reached the absolute end where all content is fully visible:

setIsNextButtonVisible(
ref.current ? scrollLeft + ref.current.clientWidth < ref.current.scrollWidth : false
);

Or better yet, add a threshold to account for the last tab's full width before disabling.

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

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