bug(mat-stepper): initializing on next step breaks UI

[jonaslaurens]

Is this a regression?

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

The previous version in which this bug was not present was

v17

Description

When we initialize a component that uses mat-stepper (specifically mat-horizontal-stepper in this case) and its content has a box-shadow, if we skip the first step by calling next() or setting selectedIndex = 1 in ngAfterViewInit, we successfully reach the second step. However, the box-shadow is no longer visible.

Reproduction

StackBlitz
Steps to reproduce:

1. Load the app (box-shadow will not be visible)
2. Navigate between the steps to show the box-shadow again.

Expected Behavior

Second tab animates into the view.

Actual Behavior

Second tab loads instantly and breaks UI (box-shadow).

Environment

• Angular: 19.2.14
• CDK/Material: 19.2.19
• Browser(s): any
• Operating System (e.g. Windows, macOS, Ubuntu): any

[wagnermaciel]

Seems like updating the selectedIndex during ngAfterViewInit interrupts the animation of the mat-stepper. Here is an alternative approach that doesn't cause this timing issue

https://stackblitz.com/edit/stackblitz-starters-joxd2mmb?file=src%2Fmain.ts