From 505c560afc629c6d7099a6cc215437ae719f90a4 Mon Sep 17 00:00:00 2001
From: Kevin Buhmann <kbuhmann@vmware.com>
Date: Wed, 6 Jul 2022 13:37:03 -0500
Subject: [PATCH] fix(stepper): reset when form is reset but not when form is
 patched

closes #191
---
 .storybook/stories/stepper/stepper.stories.ts |  4 +++
 .../src/accordion/stepper/stepper.spec.ts     |  7 ++++++
 .../angular/src/accordion/stepper/stepper.ts  | 25 ++++++++++++++-----
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/.storybook/stories/stepper/stepper.stories.ts b/.storybook/stories/stepper/stepper.stories.ts
index 55517ebd4d..5cb1639e01 100644
--- a/.storybook/stories/stepper/stepper.stories.ts
+++ b/.storybook/stories/stepper/stepper.stories.ts
@@ -26,6 +26,10 @@ const defaultStory: Story = args => ({
             <input clrInput formControlName="value" />
           </clr-input-container>
 
+          <br />
+          <button class="btn" (click)="form.patchValue({})">Patch Form</button>
+          <button class="btn" (click)="form.reset()">Reset Form</button>
+
           <button *ngIf="stepCount > i + 1" clrStepButton="next">next</button>
           <button *ngIf="stepCount === i + 1" clrStepButton="submit">submit</button>
         </clr-step-content>
diff --git a/projects/angular/src/accordion/stepper/stepper.spec.ts b/projects/angular/src/accordion/stepper/stepper.spec.ts
index b1295ba60a..94b0ca3ec0 100644
--- a/projects/angular/src/accordion/stepper/stepper.spec.ts
+++ b/projects/angular/src/accordion/stepper/stepper.spec.ts
@@ -144,6 +144,13 @@ describe('ClrStepper', () => {
       expect(stepperService.resetPanels).toHaveBeenCalled();
     });
 
+    it('should not reset panels when form is patched', () => {
+      spyOn(stepperService, 'resetPanels');
+      testComponent.form.patchValue({});
+      fixture.detectChanges();
+      expect(stepperService.resetPanels).not.toHaveBeenCalled();
+    });
+
     it('should trigger ngSubmit event when all panels have completed', () => {
       spyOn(testComponent, 'submit');
       (testComponent.form.controls.group as FormGroup).controls.name.setValue('1');
diff --git a/projects/angular/src/accordion/stepper/stepper.ts b/projects/angular/src/accordion/stepper/stepper.ts
index c0201827f4..6252728ec3 100644
--- a/projects/angular/src/accordion/stepper/stepper.ts
+++ b/projects/angular/src/accordion/stepper/stepper.ts
@@ -17,9 +17,9 @@ import {
   QueryList,
   SimpleChanges,
 } from '@angular/core';
-import { FormGroupDirective, NgForm } from '@angular/forms';
-import { Subscription } from 'rxjs';
-import { filter, startWith } from 'rxjs/operators';
+import { AbstractControl, FormGroupDirective, NgForm } from '@angular/forms';
+import { Observable, Subscription } from 'rxjs';
+import { startWith } from 'rxjs/operators';
 
 import { AccordionService } from '../providers/accordion.service';
 import { StepperService } from './providers/stepper.service';
@@ -73,9 +73,7 @@ export class ClrStepper implements OnInit, OnChanges, AfterViewInit, OnDestroy {
   }
 
   private listenForFormResetChanges() {
-    return this.form.statusChanges
-      .pipe(filter(() => this.form.pristine)) // https://github.com/angular/angular/issues/10887
-      .subscribe(() => this.stepperService.resetPanels());
+    return fromControlReset(this.form.form).subscribe(() => this.stepperService.resetPanels());
   }
 
   private listenForPanelsCompleted() {
@@ -103,3 +101,18 @@ export class ClrStepper implements OnInit, OnChanges, AfterViewInit, OnDestroy {
     });
   }
 }
+
+function fromControlReset(control: AbstractControl) {
+  return new Observable<void>(observer => {
+    const unpatchedControlReset = control.reset;
+
+    control.reset = () => {
+      observer.next();
+      unpatchedControlReset.apply(control);
+    };
+
+    return () => {
+      control.reset = unpatchedControlReset;
+    };
+  });
+}