From ad4735c2952904c440343bbbf0997d3ae546c216 Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Thu, 10 Nov 2022 21:26:48 -0500
Subject: [PATCH] chore: improve input filter code

---
 packages/common/src/filters/compoundInputFilter.ts | 11 ++++-------
 packages/common/src/filters/inputFilter.ts         | 11 ++++-------
 packages/common/src/filters/inputMaskFilter.ts     |  7 +++----
 3 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/packages/common/src/filters/compoundInputFilter.ts b/packages/common/src/filters/compoundInputFilter.ts
index 8085a5cd6..3a9aeef3d 100644
--- a/packages/common/src/filters/compoundInputFilter.ts
+++ b/packages/common/src/filters/compoundInputFilter.ts
@@ -19,7 +19,6 @@ import { TranslaterService } from '../services/translater.service';
 
 export class CompoundInputFilter implements Filter {
   protected _bindEventService: BindingEventService;
-  protected _clearFilterTriggered = false;
   protected _currentValue?: number | string;
   protected _debounceTypingDelay = 0;
   protected _shouldTriggerQuery = true;
@@ -113,7 +112,6 @@ export class CompoundInputFilter implements Filter {
    */
   clear(shouldTriggerQuery = true) {
     if (this._filterElm && this._selectOperatorElm) {
-      this._clearFilterTriggered = true;
       this._shouldTriggerQuery = shouldTriggerQuery;
       this.searchTerms = [];
       this._filterInputElm.value = '';
@@ -121,7 +119,7 @@ export class CompoundInputFilter implements Filter {
       this._currentValue = undefined;
       this._filterElm.classList.remove('filled');
       this._filterInputElm.classList.remove('filled');
-      this.onTriggerEvent(undefined);
+      this.onTriggerEvent(undefined, true);
     }
   }
 
@@ -265,9 +263,9 @@ export class CompoundInputFilter implements Filter {
    * Event trigger, could be called by the Operator dropdown or the input itself and we will cover the following (keyup, change, mousewheel & spinner)
    * We will trigger the Filter Service callback from this handler
    */
-  protected onTriggerEvent(event: MouseEvent | KeyboardEvent | undefined) {
-    if (this._clearFilterTriggered) {
-      this.callback(event, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery });
+  protected onTriggerEvent(event: MouseEvent | KeyboardEvent | undefined, isClearFilterEvent = false) {
+    if (isClearFilterEvent) {
+      this.callback(event, { columnDef: this.columnDef, clearFilterTriggered: isClearFilterEvent, shouldTriggerQuery: this._shouldTriggerQuery });
       this._filterElm.classList.remove('filled');
     } else {
       const eventType = event?.type ?? '';
@@ -300,7 +298,6 @@ export class CompoundInputFilter implements Filter {
     }
 
     // reset both flags for next use
-    this._clearFilterTriggered = false;
     this._shouldTriggerQuery = true;
   }
 }
diff --git a/packages/common/src/filters/inputFilter.ts b/packages/common/src/filters/inputFilter.ts
index 733f767ca..7f30e957b 100644
--- a/packages/common/src/filters/inputFilter.ts
+++ b/packages/common/src/filters/inputFilter.ts
@@ -15,7 +15,6 @@ import { createDomElement, emptyElement, } from '../services';
 
 export class InputFilter implements Filter {
   protected _bindEventService: BindingEventService;
-  protected _clearFilterTriggered = false;
   protected _debounceTypingDelay = 0;
   protected _shouldTriggerQuery = true;
   protected _inputType = 'text';
@@ -103,12 +102,11 @@ export class InputFilter implements Filter {
    */
   clear(shouldTriggerQuery = true) {
     if (this._filterInputElm) {
-      this._clearFilterTriggered = true;
       this._shouldTriggerQuery = shouldTriggerQuery;
       this.searchTerms = [];
       this._filterInputElm.value = '';
       this._filterInputElm.classList.remove('filled');
-      this.onTriggerEvent(undefined);
+      this.onTriggerEvent(undefined, true);
     }
   }
 
@@ -224,9 +222,9 @@ export class InputFilter implements Filter {
    * Event handler to cover the following (keyup, change, mousewheel & spinner)
    * We will trigger the Filter Service callback from this handler
    */
-  protected onTriggerEvent(event: MouseEvent | KeyboardEvent | undefined) {
-    if (this._clearFilterTriggered) {
-      this.callback(event, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery });
+  protected onTriggerEvent(event?: MouseEvent | KeyboardEvent, isClearFilterEvent = false) {
+    if (isClearFilterEvent) {
+      this.callback(event, { columnDef: this.columnDef, clearFilterTriggered: isClearFilterEvent, shouldTriggerQuery: this._shouldTriggerQuery });
       this._filterInputElm.classList.remove('filled');
     } else {
       const eventType = event?.type ?? '';
@@ -248,7 +246,6 @@ export class InputFilter implements Filter {
     }
 
     // reset both flags for next use
-    this._clearFilterTriggered = false;
     this._shouldTriggerQuery = true;
   }
 }
diff --git a/packages/common/src/filters/inputMaskFilter.ts b/packages/common/src/filters/inputMaskFilter.ts
index a91623e1b..12e9139f2 100644
--- a/packages/common/src/filters/inputMaskFilter.ts
+++ b/packages/common/src/filters/inputMaskFilter.ts
@@ -56,7 +56,7 @@ export class InputMaskFilter extends InputFilter {
    * Event handler to cover the following (keyup, change, mousewheel & spinner)
    * We will trigger the Filter Service callback from this handler
    */
-  protected onTriggerEvent(event: MouseEvent | KeyboardEvent | undefined) {
+  protected onTriggerEvent(event?: MouseEvent | KeyboardEvent, isClearFilterEvent = false) {
     let value = '';
     if ((event?.target as HTMLInputElement)?.value) {
       let targetValue = (event?.target as HTMLInputElement)?.value ?? '';
@@ -77,15 +77,14 @@ export class InputMaskFilter extends InputFilter {
       }
     }
 
-    if (this._clearFilterTriggered) {
-      this.callback(event, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery });
+    if (isClearFilterEvent) {
+      this.callback(event, { columnDef: this.columnDef, clearFilterTriggered: isClearFilterEvent, shouldTriggerQuery: this._shouldTriggerQuery });
       this._filterInputElm.classList.remove('filled');
     } else {
       this._filterInputElm.classList.add('filled');
       this.callback(event, { columnDef: this.columnDef, operator: this.operator, searchTerms: [value], shouldTriggerQuery: this._shouldTriggerQuery });
     }
     // reset both flags for next use
-    this._clearFilterTriggered = false;
     this._shouldTriggerQuery = true;
   }