bug(stepper): cannot change step with linear set to true and selected index different than 0

[tomaszek92]

Reproduction

https://stackblitz.com/edit/angular-akgquv

Steps to reproduce:

1. Open stackblitz.
2. Fill the form in the third step.
3. Click "next" or "back" button.

Expected Behavior

What behaviour were you expecting to see?

• You can go to the previous step.
• You can go to the next step if you have a completed form.

Actual Behavior

• You cannot go to the previous step.
• You cannot go to the next step if you have a completed form.

Environment

• Angular: 10.09
• CDK/Material: 10.1.3
• Browser(s): Chrome 84.0.4147.125 (Official version) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[travisbashor]

Problem

Looks like this is happening because the step.interacted property is false on the first two steps. The back/next buttons call the selectedIndex setter on CdkStep, which checks the validity of any existing step controls on steps prior to the target index. Additionally, if a control exists on the step, it makes sure that the user has interacted.

Starting at step 3 means that won't be true for the first two steps, so trying to navigate to any step other than the first one will fail.

Observations

There are a couple other consequences of starting at index 2 in a linear stepper, too:

• Navigation would fail in the same way even if there were no stepControls on the first two, as their .completed properties start off false. In the validity check, that's on the other side of the ternary.
• Even though you specified valid values in the forms of the first two steps of the linked example, the icons don't show as edit icons. They are gray, which seems to suggest that the steps don't have values in them. A bit misleading.

Possible solutions

Always start at the beginning (not recommended)

Starting from index 0 and completing all valid steps leading up to the initial selectedIndex would make it work because it would make the preceding steps' .completed and .interacted both true. However, doing so may lead to unintended initialization logic in each step firing on the way. If the initialization logic came from a component in the template, it could be short-circuited by making the choice to auto-complete early in ngOnInit(), but that seems like polluting the CdkStep with a little too much knowledge of its context. I don't think this is a good option, but it does seem to be an option.

Make interaction optional (recommended)

It may be useful to give the steps an _interactedOverride property, just like .completed has. That would allow for the scenario where a step is necessary, but may not require interaction. That could happen if some of the necessary information from one of the first steps is known or derivable going in.

If such a property existed, the new logic could be something like:

if (this._linear && index >= 0) {
      // Is there any step prior to the target step that needs interaction or completion?
      return steps.slice(0, index).some(step => {
        const control = step.stepControl;
        const hasInvalidOrPendingControl = control && (control.invalid || control.pending);
        const needsCompletion = !step.optional && !(step.completed || step._completedOverride);
        const needsInteraction =  !step.optional && !(step.interacted || step._interactedOverride);

        return needsInteraction || needsCompletion || hasInvalidOrPendingControl;
      });
    } 

and it would just put the onus of setting those overrides on the consumer of the step. However, it wouldn't solve the icons misrepresenting the step state. Maybe that's worth a different PR.

[intellix]

Another thing is Stepper is very edge-casey in general relating to the indexes/completed properties (we're not using Forms here). I'm having to do this:

setIndex(index: number) {
  this.completedIndex = index;
  setTimeout(() => {
    this.selectedIndex = index;
    this.initiated = true;
    this.cd.markForCheck();
  });
}

<mat-horizontal-stepper [linear]="true" [selectedIndex]="selectedIndex" *ngIf="initiated">
  <mat-step *ngFor="let step of steps" [editable]="true" [optional]="false" [completed]="completedIndex > i">

1. If you don't set completed before selectedIndex, you have problems, so you have to set it first and later set selectedIndex
2. If you update those those values after you already have a stepper, you'll have problems so you have to delay creating the stepper until you have the initial state

We're restoring the step index from localStorage and it was probably the most problematic component thus far.