fix(stepper): reset when form is reset but not when form is patched

closes #191
vmware-clarity · Jul 7, 2022 · 505c560 · 505c560
1 parent 59fafdd
commit 505c560
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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;
+    };
+  });
+}