fix(stepper): last step not being marked as interacted

Fixes the last step in the stepper never being marked as `interacted`. Also fixes some weird logic where we were changing the step state inside `_anyControlsInvalidOrPending` which is a getter method.

Fixes #17974.

Author: crisbeto

src/cdk/stepper/stepper.ts

@@ -297,8 +297,16 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
         throw Error('cdkStepper: Cannot assign out-of-bounds value to `selectedIndex`.');
       }
 
+      const selectedStep = this.selected;
+
+      if (selectedStep) {
+        // TODO: this should really be called something like `visited` instead. Just because
+        // the user has seen the step doesn't guarantee that they've interacted with it.
+        selectedStep.interacted = true;
+      }
+
       if (this._selectedIndex != newIndex && !this._anyControlsInvalidOrPending(newIndex) &&
-          (newIndex >= this._selectedIndex || this.steps.toArray()[newIndex].editable)) {
+          (newIndex >= this._selectedIndex || this._steps.toArray()[newIndex].editable)) {
         this._updateSelectedItemIndex(index);
       }
     } else {
@@ -487,12 +495,8 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
   }
 
   private _anyControlsInvalidOrPending(index: number): boolean {
-    const steps = this.steps.toArray();
-
-    steps[this._selectedIndex].interacted = true;
-
     if (this._linear && index >= 0) {
-      return steps.slice(0, index).some(step => {
+      return this.steps.toArray().slice(0, index).some(step => {
         const control = step.stepControl;
         const isIncomplete =
             control ? (control.invalid || control.pending || !step.interacted) : !step.completed;

src/material/stepper/stepper.spec.ts

@@ -937,6 +937,28 @@ describe('MatStepper', () => {
 
       expect(headerRipples.every(ripple => ripple.disabled)).toBe(true);
     });
+
+    it('should be able to mark all steps as interacted', () => {
+      const fixture = createComponent(SimpleMatHorizontalStepperApp);
+      fixture.detectChanges();
+
+      const stepper: MatStepper =
+          fixture.debugElement.query(By.directive(MatStepper)).componentInstance;
+
+      expect(stepper.steps.map(step => step.interacted)).toEqual([false, false, false]);
+
+      stepper.next();
+      fixture.detectChanges();
+      expect(stepper.steps.map(step => step.interacted)).toEqual([true, false, false]);
+
+      stepper.next();
+      fixture.detectChanges();
+      expect(stepper.steps.map(step => step.interacted)).toEqual([true, true, false]);
+
+      stepper.next();
+      fixture.detectChanges();
+      expect(stepper.steps.map(step => step.interacted)).toEqual([true, true, true]);
+    });
   });
 
   describe('linear stepper with valid step', () => {