MatStepper - Cannot set property 'interacted' of undefined

[Hypenate]

Reproduction

I'm not to sure how to reproduce this, but I'm trying to get the index of a certain step (the last or second last)

protected getStepIndex(): number {
    // In our case uncommenthing the following comment prevents the error.
    // if (this.stepper.steps.length === 0) {
    //      return 0;
    // }

    if (true) {
      return this.stepper.steps ? this.stepper.steps.length - 1 : 0;
    } else {
      return this.stepper.steps ? this.stepper.steps.length - 2 : 0;
    }
  }

This error is thrown:

ERROR TypeError: Cannot set property 'interacted' of undefined
at MatHorizontalStepper._anyControlsInvalidOrPending (stepper.js:446)
at MatHorizontalStepper.set selectedIndex [as selectedIndex] (stepper.js:286)
at WizardArchiveImportComponent.selectStartingStep (wizard-archive-import.component.ts:112)
at wizard.base.ts:99
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:27419)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at invokeTask (zone-evergreen.js:480)
at ZoneTask.invoke (zone-evergreen.js:469)

If I look into the function _anyControlsInvalidOrPending I see the following code: steps[this._selectedIndex].interacted = true; but I assume it cannot be found

Expected Behavior

No errors are thrown, the issue should be handled -> Check if a stepper exists on that index

Actual Behavior

An error is thrown

Environment

• Angular: 10.2.0
• CDK/Material: 10.2.0
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[jelbourn]

This seems to happen if the selectedIndex` is set to a step that doesn't exist.

Reproduction: https://stackblitz.com/edit/angular-7ejs1d?file=src/app/stepper-editable-example.html

[Hypenate]

I tried reproducing it: https://stackblitz.com/edit/angular-7ejs1d-1yavn9?file=src/app/stepper-editable-example.html
But the error thrown now is a custom error, which makes sense