Package

@carbon/react

Browser

Firefox

Package version

v1.95.0

React version

v19.1.1

Description

When using Carbon’s Tabs inside a Modal, the tab doesn’t activate on click near the edges of the view. Clicking the same tab again now selects the tab.

See example with Vertical Tabs (issue also reproducible with horizontal tabs)

Current behaviour:
Currently, the tab auto-scrolls to the center on click, but isn't active.

Expected behaviour:
The tab auto-scrolls to the center and is active.

Reproduction/example

https://stackblitz.com/edit/github-t39n99kg?file=src%2FApp.jsx

Steps to reproduce

1. Open Preview in a new tab.
2. Open modal.
3. Cilck on an inactive tab that is closer to the top or bottom border.
4. Tab scrolls to center, has :focus pseudo-class, but is not active.
5. Press the tab again to activate.

Suggested Severity

Severity 3 = User can complete task, and/or has a 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