fix(material/stepper): last step not being marked as interacted (#17976)

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.

(cherry picked from commit cd3d0e9)

Author: crisbeto

src/cdk/stepper/stepper.ts

@@ -297,6 +297,14 @@ export class CdkStepper implements AfterContentInit, 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)) {
         this._updateSelectedItemIndex(index);
@@ -500,12 +508,8 @@ export class CdkStepper implements AfterContentInit, 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

@@ -1025,6 +1025,28 @@ describe('MatStepper', () => {
       expect(headers[2].classList.contains('mat-primary')).toBe(true);
       expect(headers[1].classList.contains('mat-accent')).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', () => {