bug(COMPONENT): mat-tab-group tab looses focus when hidden and then shown

[angelmv9]

trafficstars

Is this a regression?

• [x] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

13.3.7

Description

The user has a list of tab labels inside a mat-tab-group that exceed the width of the header so pagination controls (left and right arrows) show up, and one of the tabs that is outside of the first set of tabs has been selected. If the mat-tab-group is hidden using CSS property display: none, and shown again, the previously selected tab is still selected, but the menu has "scrolled" back to the first set of tabs, and thus the selected tab is not visible.

The issue starts appearing in 13.3.8

Reproduction

Steps to reproduce:

1. Make the browser window small enough so that the list of tab labels inside a mat-tab-group that exceed the width of the header so pagination controls (left and right arrows) show up.

2. Click on one of the very last tabs on the right, say 'Sixth'

3. Click the button to hide all tabs

4. Click the button again to show all tabs.

5. Notice that the tabs "scrolled" all the way to the very first tab and the one previously selected tab is not in focus, even though it is still selected.

StackBlitz: stackblitz.com/edit/angular-a5k54d

Expected Behavior

The menu keeps the focus on the selected tab

Actual Behavior

The menu "scrolls" back to the first set of tabs, leaving the selected tab out of focus

Environment

• Angular: 14.2.0

• CDK/Material: 14.2.0

• Browser(s):

  • Chrome version 96.0.4664.45
  • Chrome version 104.0.5112.101
  • Firefox version 91.7

• Operating System (e.g. Windows, macOS, Ubuntu): CentOS 7, macOS Monterey 12.5.1

[angelmv9]

It seems what's causing this is _scrollDistance being set to 0 in paginated-tab-header.ts. Scroll distance is the "distance in pixels that the tab labels should be translated to the left."

Looking at a diff between version 13.3.7 (works fine) & 13.3.8 (breaks), the new _itemsResized() might be what's causing this.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}