diff --git a/packages/common/src/filters/__tests__/autocompleterFilter.spec.ts b/packages/common/src/filters/__tests__/autocompleterFilter.spec.ts
index 5efd7f03d..cd62e7fe0 100644
--- a/packages/common/src/filters/__tests__/autocompleterFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/autocompleterFilter.spec.ts
@@ -182,6 +182,21 @@ describe('AutocompleterFilter', () => {
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['abc'], shouldTriggerQuery: true });
   });
 
+  it('should be able to call "setValues" and call an event trigger', () => {
+    mockColumn.filter.collection = [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }];
+    mockColumn.filter.filterOptions = { triggerOnEveryKeyStroke: true };
+    gridOptionMock.enableFilterTrimWhiteSpace = false;
+    mockColumn.filter.enableTrimWhiteSpace = true;
+    const spyCallback = jest.spyOn(filterArguments, 'callback');
+
+    filter.init(filterArguments);
+    filter.setValues('xyz', 'NE', true);
+    const filterElm = divContainer.querySelector('input.filter-gender') as HTMLInputElement;
+
+    expect(filterElm).toBeTruthy();
+    expect(spyCallback).toHaveBeenCalledWith(undefined, { columnDef: mockColumn, operator: 'NE', searchTerms: ['xyz'], shouldTriggerQuery: true });
+  });
+
   it('should trigger the callback method when user types something in the input and triggerOnEveryKeyStroke is enabled', () => {
     mockColumn.filter.collection = [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }];
     mockColumn.filter.filterOptions = { triggerOnEveryKeyStroke: true };
diff --git a/packages/common/src/filters/__tests__/compoundDateFilter.spec.ts b/packages/common/src/filters/__tests__/compoundDateFilter.spec.ts
index 92120fddc..55707d3b0 100644
--- a/packages/common/src/filters/__tests__/compoundDateFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/compoundDateFilter.spec.ts
@@ -168,6 +168,18 @@ describe('CompoundDateFilter', () => {
     expect(filterOperatorElm.value).toBe('>=');
   });
 
+  it('should be able to call "setValues" and call an event trigger', () => {
+    const spyCallback = jest.spyOn(filterArguments, 'callback');
+    const mockDate = '2001-01-02T16:02:02.239Z';
+    filter.init(filterArguments);
+    filter.setValues([mockDate], '>=', true);
+    const filterOperatorElm = divContainer.querySelector('.input-group-prepend.operator select') as HTMLInputElement;
+
+    expect(filter.currentDateOrDates).toEqual(mockDate);
+    expect(filterOperatorElm.value).toBe('>=');
+    expect(spyCallback).toHaveBeenCalledWith(undefined, { columnDef: mockColumn, operator: '>=', searchTerms: [mockDate], shouldTriggerQuery: true });
+  });
+
   it('should trigger input change event and expect the callback to be called with the date provided in the input', () => {
     mockColumn.filter!.operator = '>';
     const spyCallback = jest.spyOn(filterArguments, 'callback');
diff --git a/packages/common/src/filters/__tests__/compoundSliderFilter.spec.ts b/packages/common/src/filters/__tests__/compoundSliderFilter.spec.ts
index 5f8818a95..9a2eb4cba 100644
--- a/packages/common/src/filters/__tests__/compoundSliderFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/compoundSliderFilter.spec.ts
@@ -209,6 +209,16 @@ describe('CompoundSliderFilter', () => {
     expect(filledInputElm).toBeFalsy();
   });
 
+  it('should be able to call "setValues" and call an event trigger', () => {
+    const spyCallback = jest.spyOn(filterArguments, 'callback');
+    filter.init(filterArguments);
+    filter.setValues(9, '>=', true);
+    let filledInputElm = divContainer.querySelector('.search-filter.filter-duration.filled') as HTMLInputElement;
+
+    expect(filledInputElm).toBeTruthy();
+    expect(spyCallback).toHaveBeenCalledWith(undefined, { columnDef: mockColumn, operator: '>=', searchTerms: [9], shouldTriggerQuery: true });
+  });
+
   it('should create the input filter with default search terms range when passed as a filter argument', () => {
     const filterArgs = { ...filterArguments, operator: '<=', searchTerms: [3], grid: gridStub } as FilterArguments;
 
diff --git a/packages/common/src/filters/__tests__/inputFilter.spec.ts b/packages/common/src/filters/__tests__/inputFilter.spec.ts
index 460c4887f..5ae73bb89 100644
--- a/packages/common/src/filters/__tests__/inputFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/inputFilter.spec.ts
@@ -160,6 +160,16 @@ describe('InputFilter', () => {
       expect(filledInputElm).toBeFalsy();
     });
 
+    it('should be able to call "setValues" and call an event trigger', () => {
+      const spyCallback = jest.spyOn(filterArguments, 'callback');
+      filter.init(filterArguments);
+      filter.setValues('9', '>', true);
+      let filledInputElm = divContainer.querySelector('.search-filter.filter-duration.filled') as HTMLInputElement;
+
+      expect(filledInputElm).toBeTruthy();
+      expect(spyCallback).toHaveBeenCalledWith(undefined, { columnDef: mockColumn, operator: '>', searchTerms: ['>9'], shouldTriggerQuery: true });
+    });
+
     it('should call "setValues" and include an operator and expect the operator to show up in the output search string shown in the filter input text value', () => {
       filter.init(filterArguments);
 
diff --git a/packages/common/src/filters/__tests__/selectFilter.spec.ts b/packages/common/src/filters/__tests__/selectFilter.spec.ts
index 1dcaf9bd5..534c7a098 100644
--- a/packages/common/src/filters/__tests__/selectFilter.spec.ts
+++ b/packages/common/src/filters/__tests__/selectFilter.spec.ts
@@ -277,6 +277,7 @@ describe('SelectFilter', () => {
 
   it('should provide boolean values and expect "getValues" to be converted to string', () => {
     mockColumn.filter!.collection = [{ value: true, label: 'True' }, { value: false, label: 'False' }];
+
     filter.init(filterArguments);
     filter.setValues([false]);
     const values = filter.getValues();
@@ -285,6 +286,18 @@ describe('SelectFilter', () => {
     expect(values.length).toBe(1);
   });
 
+  it('should be able to call "setValues" and call an event trigger', () => {
+    const spyCallback = jest.spyOn(filterArguments, 'callback');
+    mockColumn.filter!.collection = [{ value: true, label: 'True' }, { value: false, label: 'False' }];
+
+    filter.init(filterArguments);
+    filter.setValues([false], 'NE', true);
+    const values = filter.getValues();
+
+    expect(values).toEqual(['false']);
+    expect(spyCallback).toHaveBeenCalledWith(undefined, { columnDef: mockColumn, operator: 'NE', searchTerms: ['false'], shouldTriggerQuery: true });
+  });
+
   it('should have empty array returned from "getValues" when nothing is set', () => {
     mockColumn.filter!.collection = [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }];
     filter.init(filterArguments);
diff --git a/packages/common/src/filters/autocompleterFilter.ts b/packages/common/src/filters/autocompleterFilter.ts
index 101a66f75..1da01e155 100644
--- a/packages/common/src/filters/autocompleterFilter.ts
+++ b/packages/common/src/filters/autocompleterFilter.ts
@@ -225,7 +225,7 @@ export class AutocompleterFilter<T extends AutocompleteItem = any> implements Fi
       this.searchTerms = [];
       this._filterElm.value = '';
       this._filterElm.dispatchEvent(new CustomEvent('input'));
-      this._filterElm.classList.remove('filled');
+      this.updateFilterStyle(false);
     }
   }
 
@@ -249,21 +249,24 @@ export class AutocompleterFilter<T extends AutocompleteItem = any> implements Fi
   }
 
   getValues(): string {
-    return this._filterElm?.value;
+    return this._filterElm?.value || '';
   }
 
   /** Set value(s) on the DOM element  */
-  setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString): void {
+  setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString, triggerChange = false): void {
     if (values && this._filterElm) {
       this._filterElm.value = values as string;
     }
 
     // add/remove "filled" class name
-    const classCmd = this.getValues() !== '' ? 'add' : 'remove';
-    this._filterElm?.classList[classCmd]('filled');
+    this.updateFilterStyle(this.getValues() !== '');
 
     // set the operator when defined
     this.operator = operator || this.defaultOperator;
+
+    if (triggerChange) {
+      this.callback(undefined, { columnDef: this.columnDef, operator: this.operator, searchTerms: [this.getValues()], shouldTriggerQuery: true });
+    }
   }
 
   //
@@ -516,8 +519,7 @@ export class AutocompleterFilter<T extends AutocompleteItem = any> implements Fi
       itemValue = this.trimWhitespaceWhenEnabled(itemValue);
 
       // add/remove "filled" class name
-      const classCmd = itemValue === '' ? 'remove' : 'add';
-      this._filterElm?.classList[classCmd]('filled');
+      this.updateFilterStyle(itemValue !== '');
 
       this.setValues(itemLabel);
       this.callback(event, { columnDef: this.columnDef, operator: this.operator, searchTerms: [itemValue], shouldTriggerQuery: this._shouldTriggerQuery });
@@ -545,13 +547,7 @@ export class AutocompleterFilter<T extends AutocompleteItem = any> implements Fi
         callbackArgs.searchTerms = [value];
       }
 
-      if (value !== '') {
-        this.isItemSelected = true;
-        this._filterElm?.classList.add('filled');
-      } else {
-        this.isItemSelected = false;
-        this._filterElm?.classList.remove('filled');
-      }
+      this.updateFilterStyle(value !== '');
       this.callback(e, callbackArgs);
     }
 
@@ -605,4 +601,14 @@ export class AutocompleterFilter<T extends AutocompleteItem = any> implements Fi
     }
     return outputValue;
   }
+
+  /** add/remove "filled" CSS class */
+  protected updateFilterStyle(isFilled: boolean): void {
+    this.isItemSelected = isFilled;
+    if (isFilled) {
+      this._filterElm.classList.add('filled');
+    } else {
+      this._filterElm.classList.remove('filled');
+    }
+  }
 }
\ No newline at end of file
diff --git a/packages/common/src/filters/dateFilter.ts b/packages/common/src/filters/dateFilter.ts
index d4fa5f8b7..3b0427135 100644
--- a/packages/common/src/filters/dateFilter.ts
+++ b/packages/common/src/filters/dateFilter.ts
@@ -124,9 +124,7 @@ export class DateFilter implements Filter {
     this._filterElm = this.createDomFilterElement(searchValues);
 
     // if there's a search term, we will add the "filled" class for styling purposes
-    if (this.searchTerms.length) {
-      this._filterElm.classList.add('filled');
-    }
+    this.updateFilterStyle(this.searchTerms.length > 0);
 
     // step 3, subscribe to the keyup event and run the callback when that happens
     // also add/remove "filled" class for styling purposes
@@ -173,7 +171,7 @@ export class DateFilter implements Filter {
       }
     }
     this.onTriggerEvent(new Event('keyup'));
-    this._filterElm.classList.remove('filled');
+    this.updateFilterStyle(false);
   }
 
   /** Destroy the filter */
@@ -207,7 +205,7 @@ export class DateFilter implements Filter {
    * Set value(s) on the DOM element
    * @params searchTerms
    */
-  setValues(values?: SearchTerm[] | SearchTerm, operator?: OperatorType | OperatorString): void {
+  setValues(values?: SearchTerm[] | SearchTerm, operator?: OperatorType | OperatorString, triggerChange = false): void {
     let pickerValues: any | any[];
 
     if (this.inputFilterType === 'compound') {
@@ -227,11 +225,10 @@ export class DateFilter implements Filter {
     }
 
     const currentValueOrValues = this.getValues() || [];
-    if (this.getValues() || (Array.isArray(currentValueOrValues) && currentValueOrValues.length > 0 && values)) {
-      this._filterElm.classList.add('filled');
-    } else {
-      this._filterElm.classList.remove('filled');
-    }
+    const searchTerms = Array.isArray(currentValueOrValues) ? currentValueOrValues : [currentValueOrValues];
+
+    // set the operator when defined
+    this.updateFilterStyle(searchTerms.length > 0);
 
     // set the operator when defined
     this.operator = operator || this.defaultOperator;
@@ -239,6 +236,10 @@ export class DateFilter implements Filter {
       const operatorShorthand = mapOperatorToShorthandDesignation(this.operator);
       this._selectOperatorElm.value = operatorShorthand;
     }
+
+    if (triggerChange) {
+      this.callback(undefined, { columnDef: this.columnDef, searchTerms, operator: this.operator, shouldTriggerQuery: true });
+    }
   }
 
   //
@@ -486,14 +487,15 @@ export class DateFilter implements Filter {
   protected onTriggerEvent(e: Event | undefined): void {
     if (this._clearFilterTriggered) {
       this.callback(e, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery });
-      this._filterElm.classList.remove('filled');
+      this.updateFilterStyle(false);
     } else {
       if (this.inputFilterType === 'range') {
-        (this._currentDateStrings) ? this._filterElm.classList.add('filled') : this._filterElm.classList.remove('filled');
-        this.callback(e, { columnDef: this.columnDef, searchTerms: (this._currentDateStrings ? this._currentDateStrings : [this._currentValue as string]), operator: this.operator || '', shouldTriggerQuery: this._shouldTriggerQuery });
+        const searchTerms = (this._currentDateStrings ? this._currentDateStrings : [this._currentValue as string]);
+        this.updateFilterStyle(searchTerms.length > 0);
+        this.callback(e, { columnDef: this.columnDef, searchTerms, operator: this.operator || '', shouldTriggerQuery: this._shouldTriggerQuery });
       } else if (this.inputFilterType === 'compound' && this._selectOperatorElm) {
         const selectedOperator = this._selectOperatorElm.value as OperatorString;
-        this._currentValue ? this._filterElm.classList.add('filled') : this._filterElm.classList.remove('filled');
+        this.updateFilterStyle(!!this._currentValue);
 
         // when changing compound operator, we don't want to trigger the filter callback unless the date input is also provided
         const skipNullInput = this.columnFilter.skipCompoundOperatorFilterWithNullInput ?? this.gridOptions.skipCompoundOperatorFilterWithNullInput ?? this.gridOptions.skipCompoundOperatorFilterWithNullInput === undefined;
@@ -510,4 +512,13 @@ export class DateFilter implements Filter {
     this._shouldTriggerQuery = true;
     this._lastSearchValue = this._currentValue;
   }
+
+  /** add/remove "filled" CSS class */
+  protected updateFilterStyle(isFilled: boolean): void {
+    if (isFilled) {
+      this._filterElm.classList.add('filled');
+    } else {
+      this._filterElm.classList.remove('filled');
+    }
+  }
 }
diff --git a/packages/common/src/filters/inputFilter.ts b/packages/common/src/filters/inputFilter.ts
index 4e4e62337..53f2dfdc3 100644
--- a/packages/common/src/filters/inputFilter.ts
+++ b/packages/common/src/filters/inputFilter.ts
@@ -120,11 +120,10 @@ export class InputFilter implements Filter {
       this.searchTerms = [];
       this._filterInputElm.value = '';
       this._currentValue = undefined;
+      this.updateFilterStyle(false);
       if (this.inputFilterType === 'compound' && this._selectOperatorElm) {
         this._selectOperatorElm.selectedIndex = 0;
-        this._filterContainerElm.classList.remove('filled');
       }
-      this._filterInputElm.classList.remove('filled');
       this.onTriggerEvent(undefined, true);
     }
   }
@@ -143,7 +142,7 @@ export class InputFilter implements Filter {
   }
 
   /** Set value(s) on the DOM element */
-  setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString): void {
+  setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString, triggerChange = false): void {
     const searchValues = Array.isArray(values) ? values : [values];
     let newInputValue: SearchTerm = '';
     for (const value of searchValues) {
@@ -156,13 +155,8 @@ export class InputFilter implements Filter {
       this._currentValue = this._filterInputElm.value;
     }
 
-    if (this.getValues() !== '') {
-      this._filterContainerElm.classList.add('filled');
-      this._filterInputElm.classList.add('filled');
-    } else {
-      this._filterContainerElm.classList.remove('filled');
-      this._filterInputElm.classList.remove('filled');
-    }
+    // update "filled" CSS class
+    this.updateFilterStyle(this.getValues() !== '');
 
     // set the operator when defined
     this.operator = operator || this.defaultOperator;
@@ -170,6 +164,10 @@ export class InputFilter implements Filter {
       const operatorShorthand = mapOperatorToShorthandDesignation(this.operator);
       this._selectOperatorElm.value = operatorShorthand;
     }
+
+    if (triggerChange) {
+      this.onTriggerEvent(undefined, false);
+    }
   }
 
   //
@@ -273,9 +271,7 @@ export class InputFilter implements Filter {
     });
 
     // if there's a search term, we will add the "filled" class for styling purposes
-    if (searchTerm) {
-      this._filterInputElm.classList.add('filled');
-    }
+    this.updateFilterStyle(!!searchTerm);
     if (searchTerm !== undefined) {
       this._currentValue = searchVal;
     }
@@ -318,7 +314,7 @@ export class InputFilter implements Filter {
   protected onTriggerEvent(event?: MouseEvent | KeyboardEvent, isClearFilterEvent = false): void {
     if (isClearFilterEvent) {
       this.callback(event, { columnDef: this.columnDef, clearFilterTriggered: isClearFilterEvent, shouldTriggerQuery: this._shouldTriggerQuery });
-      this._filterContainerElm.classList.remove('filled');
+      this.updateFilterStyle(false);
     } else {
       const eventType = event?.type ?? '';
       const selectedOperator = (this._selectOperatorElm?.value ?? this.operator) as OperatorString;
@@ -332,7 +328,7 @@ export class InputFilter implements Filter {
         this._currentValue = value;
       }
 
-      value === '' ? this._filterContainerElm.classList.remove('filled') : this._filterContainerElm.classList.add('filled');
+      this.updateFilterStyle(value !== '');
       const callbackArgs = { columnDef: this.columnDef, operator: selectedOperator, searchTerms: (value ? [value] : null), shouldTriggerQuery: this._shouldTriggerQuery };
       const typingDelay = (eventType === 'keyup' && (event as KeyboardEvent)?.key !== 'Enter') ? this._debounceTypingDelay : 0;
 
@@ -353,4 +349,15 @@ export class InputFilter implements Filter {
     // reset both flags for next use
     this._shouldTriggerQuery = true;
   }
+
+  /** add/remove "filled" CSS class */
+  protected updateFilterStyle(isFilled: boolean): void {
+    if (isFilled) {
+      this._filterContainerElm?.classList.add('filled');
+      this._filterInputElm.classList.add('filled');
+    } else {
+      this._filterContainerElm?.classList.remove('filled');
+      this._filterInputElm.classList.remove('filled');
+    }
+  }
 }
diff --git a/packages/common/src/filters/selectFilter.ts b/packages/common/src/filters/selectFilter.ts
index 0de3a1ec5..e2cd3eea9 100644
--- a/packages/common/src/filters/selectFilter.ts
+++ b/packages/common/src/filters/selectFilter.ts
@@ -200,8 +200,7 @@ export class SelectFilter implements Filter {
     if (this._msInstance && this._collectionLength > 0) {
       // reload the filter element by it's id, to make sure it's still a valid element (because of some issue in the GraphQL example)
       this._msInstance.setSelects([]);
-      this.filterElm?.classList.remove('filled');
-      this._msInstance?.getParentElement()?.classList.remove('filled');
+      this.updateFilterStyle(false);
       this.searchTerms = [];
       this._shouldTriggerQuery = shouldTriggerQuery;
       this.callback(undefined, { columnDef: this.columnDef, clearFilterTriggered: true, shouldTriggerQuery: this._shouldTriggerQuery });
@@ -229,17 +228,23 @@ export class SelectFilter implements Filter {
   }
 
   /** Set value(s) on the DOM element */
-  setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString): void {
+  setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString, triggerChange = false): void {
     if (values !== undefined && this._msInstance) {
       values = Array.isArray(values)
         ? values.every(x => isPrimitiveValue(x)) ? values.map(String) : values
         : [values];
       this._msInstance.setSelects(values);
     }
+
+    // set the operator when defined
     this.updateFilterStyle(this.getValues().length > 0);
 
     // set the operator when defined
     this.operator = operator || this.defaultOperator;
+
+    if (triggerChange) {
+      this.onTriggerEvent();
+    }
   }
 
   //
@@ -463,7 +468,7 @@ export class SelectFilter implements Filter {
     }
   }
 
-  /** Set value(s) on the DOM element */
+  /** add/remove "filled" CSS class */
   protected updateFilterStyle(isFilled: boolean): void {
     if (isFilled) {
       this.isFilled = true;
diff --git a/packages/common/src/filters/sliderFilter.ts b/packages/common/src/filters/sliderFilter.ts
index db3334238..73605570a 100644
--- a/packages/common/src/filters/sliderFilter.ts
+++ b/packages/common/src/filters/sliderFilter.ts
@@ -164,8 +164,7 @@ export class SliderFilter implements Filter {
           this.renderSliderValues(undefined, lowestValue);
         }
       }
-      this._divContainerFilterElm.classList.remove('filled');
-      this._filterElm.classList.remove('filled');
+      this.updateFilterStyle(false);
       this.callback(undefined, { columnDef: this.columnDef, clearFilterTriggered: true, shouldTriggerQuery, searchTerms: [] });
     }
   }
@@ -201,7 +200,7 @@ export class SliderFilter implements Filter {
    * Set value(s) on the DOM element
    * @params searchTerms
    */
-  setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString): void {
+  setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString, triggerChange = false): void {
     if (values) {
       let sliderVals: Array<number | string | undefined> = [];
       const term1: SearchTerm | undefined = Array.isArray(values) ? values?.[0] : values;
@@ -240,9 +239,9 @@ export class SliderFilter implements Filter {
 
     const val = this.getValues();
     const vals = val === undefined ? [] : Array.isArray(val) ? val : [val];
-    (vals.length > 0)
-      ? this._filterElm.classList.add('filled')
-      : this._filterElm.classList.remove('filled');
+
+    // set the operator when defined
+    this.updateFilterStyle(vals.length > 0);
 
     // set the operator when defined
     if (operator !== undefined) {
@@ -252,6 +251,10 @@ export class SliderFilter implements Filter {
       const operatorShorthand = mapOperatorToShorthandDesignation(this.operator);
       this._selectOperatorElm.value = operatorShorthand;
     }
+
+    if (triggerChange) {
+      this.callback(undefined, { columnDef: this.columnDef, operator: this.operator, searchTerms: vals, shouldTriggerQuery: true });
+    }
   }
 
   /**
@@ -347,7 +350,7 @@ export class SliderFilter implements Filter {
 
     // if there's a search term, we will add the "filled" class for styling purposes
     if (Array.isArray(searchTerms) && searchTerms.length > 0 && searchTerms[0] !== '') {
-      this._divContainerFilterElm.classList.add('filled');
+      this.updateFilterStyle(true);
       this._currentValue = defaultStartValue;
     }
     if (this.filterOptions.sliderStartValue !== undefined || this.columnFilter.minValue !== undefined) {
@@ -409,11 +412,11 @@ export class SliderFilter implements Filter {
     }
 
     if (this._clearFilterTriggered) {
-      this._filterElm.classList.remove('filled');
+      this.updateFilterStyle(false);
       this.callback(e, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, searchTerms: [], shouldTriggerQuery: this._shouldTriggerQuery });
     } else {
       const selectedOperator = (this._selectOperatorElm?.value ?? this.operator) as OperatorString;
-      value === '' ? this._filterElm.classList.remove('filled') : this._filterElm.classList.add('filled');
+      this.updateFilterStyle(value !== '');
 
       // when changing compound operator, we don't want to trigger the filter callback unless the filter input is also provided
       const skipNullInput = this.columnFilter.skipCompoundOperatorFilterWithNullInput ?? this.gridOptions.skipCompoundOperatorFilterWithNullInput;
@@ -536,4 +539,15 @@ export class SliderFilter implements Filter {
       this._sliderOptions.sliderTrackBackground = bg;
     }
   }
+
+  /** add/remove "filled" CSS class */
+  protected updateFilterStyle(isFilled: boolean): void {
+    if (isFilled) {
+      this._divContainerFilterElm.classList.add('filled');
+      this._filterElm?.classList.add('filled');
+    } else {
+      this._divContainerFilterElm.classList.remove('filled');
+      this._filterElm?.classList.remove('filled');
+    }
+  }
 }
diff --git a/packages/common/src/interfaces/filter.interface.ts b/packages/common/src/interfaces/filter.interface.ts
index 36338a723..379ad90df 100644
--- a/packages/common/src/interfaces/filter.interface.ts
+++ b/packages/common/src/interfaces/filter.interface.ts
@@ -44,7 +44,7 @@ export interface Filter {
   getValues?: () => SearchTerm | SearchTerm[] | undefined;
 
   /** Set value(s) on the DOM element */
-  setValues: (values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString) => void;
+  setValues: (values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString, triggerChange?: boolean) => void;
 }
 
 export type FilterConstructor = {
diff --git a/test/cypress/e2e/example09.cy.ts b/test/cypress/e2e/example09.cy.ts
index 03b6f7dd7..ce14bbf05 100644
--- a/test/cypress/e2e/example09.cy.ts
+++ b/test/cypress/e2e/example09.cy.ts
@@ -646,7 +646,7 @@ describe('Example 09 - OData Grid', () => {
 
       cy.window().then((win) => {
         // expect(win.console.log).to.have.callCount(2);
-        expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: [{ columnId: 'name', operator: 'Contains', searchTerms: ['x'], targetSelector: 'input.form-control.filter-name.compound-input' }], type: 'filter' });
+        expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: [{ columnId: 'name', operator: 'Contains', searchTerms: ['x'], targetSelector: 'input.form-control.filter-name.compound-input.filled' }], type: 'filter' });
         // expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: { pageNumber: 1, pageSize: 10 }, type: 'pagination' });
       });
     });
diff --git a/test/cypress/e2e/example15.cy.ts b/test/cypress/e2e/example15.cy.ts
index 447678980..14db82d76 100644
--- a/test/cypress/e2e/example15.cy.ts
+++ b/test/cypress/e2e/example15.cy.ts
@@ -561,7 +561,7 @@ describe('Example 15 - OData Grid using RxJS', () => {
 
       cy.window().then((win) => {
         // expect(win.console.log).to.have.callCount(2);
-        expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: [{ columnId: 'name', operator: 'Contains', searchTerms: ['x'], targetSelector: 'input.form-control.filter-name.compound-input' }], type: 'filter' });
+        expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: [{ columnId: 'name', operator: 'Contains', searchTerms: ['x'], targetSelector: 'input.form-control.filter-name.compound-input.filled' }], type: 'filter' });
         // expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', { newValues: { pageNumber: 1, pageSize: 10 }, type: 'pagination' });
       });
     });