From 4a650cd269852ab20088b274939e89b2cfc96ec8 Mon Sep 17 00:00:00 2001
From: Marcos Callegario <mcallegario@gmail.com>
Date: Wed, 15 Dec 2021 12:03:31 -0300
Subject: [PATCH] fix(filter): add the "filled" class for styling purposes - 
 better code

---
 packages/common/src/filters/selectFilter.ts | 30 +++++++++------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/packages/common/src/filters/selectFilter.ts b/packages/common/src/filters/selectFilter.ts
index 5605ab9d7..56d82a90e 100644
--- a/packages/common/src/filters/selectFilter.ts
+++ b/packages/common/src/filters/selectFilter.ts
@@ -229,14 +229,7 @@ export class SelectFilter implements Filter {
       values = Array.isArray(values) ? values : [values];
       this.$filterElm.multipleSelect('setSelects', values);
     }
-    if (this.getValues().length > 0) {
-      this.isFilled = true;
-      this.$filterElm?.addClass('filled').siblings('div .search-filter').addClass('filled');
-    } else {
-      this.isFilled = false;
-      this.$filterElm.removeClass('filled');
-      this.$filterElm.siblings('div .search-filter').removeClass('filled');
-    }
+    this.updateFilterStyle(this.getValues().length > 0);
     // set the operator when defined
     this.operator = operator || this.defaultOperator;
   }
@@ -403,9 +396,7 @@ export class SelectFilter implements Filter {
     this.$filterElm.data('columnId', columnId);
 
     // if there's a search term, we will add the "filled" class for styling purposes
-    if (this.isFilled) {
-      this.$filterElm?.addClass('filled').siblings('div .search-filter').addClass('filled');
-    }
+    this.updateFilterStyle(this.isFilled);
 
     // append the new DOM element to the header row
     if (this.$filterElm && typeof this.$filterElm.appendTo === 'function') {
@@ -457,8 +448,17 @@ export class SelectFilter implements Filter {
   protected onTriggerEvent() {
     if (this.$filterElm) {
       const selectedItems = this.getValues();
+      this.updateFilterStyle(Array.isArray(selectedItems) && selectedItems.length > 1 || (selectedItems.length === 1 && selectedItems[0] !== ''));
+      this.searchTerms = selectedItems;
+      this.callback(undefined, { columnDef: this.columnDef, operator: this.operator, searchTerms: selectedItems, shouldTriggerQuery: this._shouldTriggerQuery });
+      // reset flag for next use
+      this._shouldTriggerQuery = true;
+    }
+  }
 
-      if (Array.isArray(selectedItems) && selectedItems.length > 1 || (selectedItems.length === 1 && selectedItems[0] !== '')) {
+  /** Set value(s) on the DOM element */
+  protected updateFilterStyle(isFilled: boolean) {
+      if (isFilled) {
         this.isFilled = true;
         this.$filterElm?.addClass('filled').siblings('div .search-filter').addClass('filled');
       } else {
@@ -466,11 +466,5 @@ export class SelectFilter implements Filter {
         this.$filterElm.removeClass('filled');
         this.$filterElm.siblings('div .search-filter').removeClass('filled');
       }
-
-      this.searchTerms = selectedItems;
-      this.callback(undefined, { columnDef: this.columnDef, operator: this.operator, searchTerms: selectedItems, shouldTriggerQuery: this._shouldTriggerQuery });
-      // reset flag for next use
-      this._shouldTriggerQuery = true;
-    }
   }
 }