Merge pull request #18 from alexcotelin/fix-update-on-blur-debounce

fix: do not debounce for update on blur

Author: NetanelBasal

projects/ngneat/forms-manager/src/lib/forms-manager.spec.ts

@@ -1240,4 +1240,46 @@ describe('FormsManager', () => {
       expect(formsManager.getInitialValue('other')).toBeUndefined();
     });
   });
+
+  describe('Debounce', () => {
+    it('should update value after default debounce of 300ms for update on change controls', fakeAsync(() => {
+      const updateOnChangeGroup = new FormGroup({
+        name: new FormControl(null, { updateOn: 'change' }),
+      });
+      formsManager.upsert('updateOnChangeGroup', updateOnChangeGroup);
+
+      updateOnChangeGroup.get('name').patchValue('Smith');
+
+      tick(100);
+      expect(formsManager.getControl('updateOnChangeGroup', 'name').value).toEqual(null);
+
+      tick(301);
+      expect(formsManager.getControl('updateOnChangeGroup', 'name').value).toEqual('Smith');
+    }));
+
+    it('should skip debounce and update value immediately for a form group set to update on blur', () => {
+      const updateOnBlurGroup = new FormGroup(
+        {
+          name: new FormControl(),
+        },
+        { updateOn: 'blur' }
+      );
+      formsManager.upsert('updateOnBlurGroup', updateOnBlurGroup);
+
+      updateOnBlurGroup.get('name').patchValue('Smith');
+
+      expect(formsManager.getControl('updateOnBlurGroup', 'name').value).toEqual('Smith');
+    });
+
+    it('should skip debounce and update value immediately for a form control set to update on blur', () => {
+      const updateOnBlurGroup = new FormGroup({
+        name: new FormControl(null, { updateOn: 'blur' }),
+      });
+      formsManager.upsert('updateOnBlurGroup', updateOnBlurGroup);
+
+      updateOnBlurGroup.get('name').patchValue('Smith');
+
+      expect(formsManager.getControl('updateOnBlurGroup', 'name').value).toEqual('Smith');
+    });
+  });
 });

projects/ngneat/forms-manager/src/lib/forms-manager.ts

@@ -1,14 +1,16 @@
 import { Inject, Injectable, Optional } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
-import { coerceArray, filterControlKeys, filterNil, isBrowser, isObject, mergeDeep } from './utils';
-import { merge, Observable, Subject, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
+import { AbstractControl, FormGroup } from '@angular/forms';
+import { coerceArray, filterControlKeys, filterNil, isBrowser, mergeDeep } from './utils';
+import { EMPTY, merge, Observable, Subject, Subscription, timer } from 'rxjs';
+import { debounce, distinctUntilChanged, filter, map, mapTo, tap } from 'rxjs/operators';
 import { FormsStore } from './forms-manager.store';
 import { Control, ControlFactory, FormKeys, HashMap, UpsertConfig } from './types';
 import { Config, NG_FORMS_MANAGER_CONFIG, NgFormsManagerConfig } from './config';
 import { isEqual } from './isEqual';
 import { deleteControl, findControl, handleFormArray, toStore } from './builders';
 
+const NO_DEBOUNCE = Symbol('NO_DEBOUNCE');
+
 @Injectable({ providedIn: 'root' })
 export class NgFormsManager<FormsState = any> {
   private readonly store: FormsStore<FormsState>;
@@ -374,10 +376,10 @@ export class NgFormsManager<FormsState = any> {
     }
 
     const unsubscribe = merge(
-      control.valueChanges,
-      control.statusChanges.pipe(distinctUntilChanged())
+      control.statusChanges.pipe(distinctUntilChanged()),
+      ...this.getValueChangeStreams(control)
     )
-      .pipe(debounceTime(mergedConfig.debounceTime))
+      .pipe(debounce(value => (value === NO_DEBOUNCE ? EMPTY : timer(mergedConfig.debounceTime))))
       .subscribe(() => {
         const value = this.updateStore(name, control);
         this.updateStorage(name, value, mergedConfig);
@@ -389,6 +391,28 @@ export class NgFormsManager<FormsState = any> {
     return this;
   }
 
+  private getValueChangeStreams(control: AbstractControl) {
+    const streams = [];
+
+    if (control.updateOn === 'blur') {
+      streams.push(control.valueChanges.pipe(mapTo(NO_DEBOUNCE)));
+    } else {
+      streams.push(control.valueChanges);
+
+      if (control instanceof FormGroup) {
+        return Object.keys(control.controls).reduce(
+          (previous, key) =>
+            control.get(key).updateOn === 'blur'
+              ? [...previous, control.get(key).valueChanges.pipe(mapTo(NO_DEBOUNCE))]
+              : [...previous],
+          streams
+        );
+      }
+    }
+
+    return streams;
+  }
+
   private removeFromStorage() {
     localStorage.setItem(this.config.merge().storage.key, JSON.stringify(this.store.getValue()));
   }