diff --git a/packages/common/src/filters/__tests__/compoundInputFilter.spec.ts b/packages/common/src/filters/__tests__/compoundInputFilter.spec.ts index 357a68167..4cb5b7512 100644 --- a/packages/common/src/filters/__tests__/compoundInputFilter.spec.ts +++ b/packages/common/src/filters/__tests__/compoundInputFilter.spec.ts @@ -72,7 +72,7 @@ describe('CompoundInputFilter', () => { filter.init(filterArguments); const filterInputElm = divContainer.querySelector('.search-filter.filter-duration input') as HTMLInputElement; - expect(filterInputElm.getAttribute('aria-label')).toBe('Duration Search Filter'); + expect(filterInputElm.ariaLabel).toBe('Duration Search Filter'); }); it('should have a placeholder when defined in its column definition', () => { @@ -83,7 +83,7 @@ describe('CompoundInputFilter', () => { const filterInputElm = divContainer.querySelector('.search-filter.filter-duration input') as HTMLInputElement; expect(filterInputElm.placeholder).toBe(testValue); - expect(filterInputElm.getAttribute('aria-label')).toBe('Duration Search Filter'); + expect(filterInputElm.ariaLabel).toBe('Duration Search Filter'); }); it('should call "setValues" and expect that value to be in the callback when triggered', () => { @@ -372,7 +372,7 @@ describe('CompoundInputFilter', () => { it('should have custom compound operator list showing up in the operator select dropdown options list', () => { mockColumn.outputType = null as any; filterArguments.searchTerms = ['xyz']; - mockColumn.filter.compoundOperatorList = [ + mockColumn.filter!.compoundOperatorList = [ { operator: '', description: '' }, { operator: '=', description: 'Equal to' }, { operator: '<', description: 'Less than' }, diff --git a/packages/common/src/filters/__tests__/compoundInputNumberFilter.spec.ts b/packages/common/src/filters/__tests__/compoundInputNumberFilter.spec.ts index a7bc928cd..0d7f80693 100644 --- a/packages/common/src/filters/__tests__/compoundInputNumberFilter.spec.ts +++ b/packages/common/src/filters/__tests__/compoundInputNumberFilter.spec.ts @@ -59,7 +59,7 @@ describe('CompoundInputNumberFilter', () => { filter.init(filterArguments); const filterInputElm = divContainer.querySelector('.search-filter.filter-duration input') as HTMLInputElement; - expect(filterInputElm.getAttribute('aria-label')).toBe('Duration Search Filter'); + expect(filterInputElm.ariaLabel).toBe('Duration Search Filter'); }); it('should initialize the filter and expect an input of type number', () => { diff --git a/packages/common/src/filters/__tests__/compoundInputPasswordFilter.spec.ts b/packages/common/src/filters/__tests__/compoundInputPasswordFilter.spec.ts index 01d71fa58..021c1fcbd 100644 --- a/packages/common/src/filters/__tests__/compoundInputPasswordFilter.spec.ts +++ b/packages/common/src/filters/__tests__/compoundInputPasswordFilter.spec.ts @@ -59,7 +59,7 @@ describe('CompoundInputPasswordFilter', () => { filter.init(filterArguments); const filterInputElm = divContainer.querySelector('.search-filter.filter-duration input') as HTMLInputElement; - expect(filterInputElm.getAttribute('aria-label')).toBe('Duration Search Filter'); + expect(filterInputElm.ariaLabel).toBe('Duration Search Filter'); }); it('should initialize the filter and expect an input of type password', () => { diff --git a/packages/common/src/filters/__tests__/inputFilter.spec.ts b/packages/common/src/filters/__tests__/inputFilter.spec.ts index 46ec03547..246751e40 100644 --- a/packages/common/src/filters/__tests__/inputFilter.spec.ts +++ b/packages/common/src/filters/__tests__/inputFilter.spec.ts @@ -64,7 +64,7 @@ describe('InputFilter', () => { filter.init(filterArguments); const filterInputElm = divContainer.querySelector('input.filter-duration') as HTMLInputElement; - expect(filterInputElm.getAttribute('aria-label')).toBe('Duration Search Filter'); + expect(filterInputElm.ariaLabel).toBe('Duration Search Filter'); }); it('should have a placeholder when defined in its column definition', () => { @@ -281,7 +281,7 @@ describe('InputFilter', () => { expect(filterElm.value).toBe(''); expect(filterFilledElms.length).toBe(0); - expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, clearFilterTriggered: true, shouldTriggerQuery: true }); + expect(spyCallback).toHaveBeenCalledWith(undefined, { columnDef: mockColumn, clearFilterTriggered: true, shouldTriggerQuery: true }); }); it('should trigger a callback with the clear filter but without querying when when calling the "clear" method with False as argument', () => { @@ -295,6 +295,6 @@ describe('InputFilter', () => { expect(filterElm.value).toBe(''); expect(filterFilledElms.length).toBe(0); - expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, clearFilterTriggered: true, shouldTriggerQuery: false }); + expect(spyCallback).toHaveBeenCalledWith(undefined, { columnDef: mockColumn, clearFilterTriggered: true, shouldTriggerQuery: false }); }); }); diff --git a/packages/common/src/filters/__tests__/inputMaskFilter.spec.ts b/packages/common/src/filters/__tests__/inputMaskFilter.spec.ts index 4a994a5ab..e618d45aa 100644 --- a/packages/common/src/filters/__tests__/inputMaskFilter.spec.ts +++ b/packages/common/src/filters/__tests__/inputMaskFilter.spec.ts @@ -70,7 +70,7 @@ describe('InputMaskFilter', () => { filter.init(filterArguments); const filterInputElm = divContainer.querySelector('input.filter-mask') as HTMLInputElement; - expect(filterInputElm.getAttribute('aria-label')).toBe('Mask Search Filter'); + expect(filterInputElm.ariaLabel).toBe('Mask Search Filter'); }); it('should initialize the filter and define the mask in the column definition instead and get the same output', () => { @@ -232,7 +232,7 @@ describe('InputMaskFilter', () => { const filterElm = divContainer.querySelector('input.filter-mask') as HTMLInputElement; expect(filterElm.value).toBe(''); - expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, clearFilterTriggered: true, shouldTriggerQuery: true }); + expect(spyCallback).toHaveBeenCalledWith(undefined, { columnDef: mockColumn, clearFilterTriggered: true, shouldTriggerQuery: true }); }); it('should trigger a callback with the clear filter but without querying when when calling the "clear" method with False as argument', () => { @@ -245,6 +245,6 @@ describe('InputMaskFilter', () => { const filterElm = divContainer.querySelector('input.filter-mask') as HTMLInputElement; expect(filterElm.value).toBe(''); - expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, clearFilterTriggered: true, shouldTriggerQuery: false }); + expect(spyCallback).toHaveBeenCalledWith(undefined, { columnDef: mockColumn, clearFilterTriggered: true, shouldTriggerQuery: false }); }); }); diff --git a/packages/common/src/filters/__tests__/inputNumberFilter.spec.ts b/packages/common/src/filters/__tests__/inputNumberFilter.spec.ts index bd1169b65..c9b01443b 100644 --- a/packages/common/src/filters/__tests__/inputNumberFilter.spec.ts +++ b/packages/common/src/filters/__tests__/inputNumberFilter.spec.ts @@ -55,7 +55,7 @@ describe('InputNumberFilter', () => { filter.init(filterArguments); const filterInputElm = divContainer.querySelector('input.filter-number') as HTMLInputElement; - expect(filterInputElm.getAttribute('aria-label')).toBe('Number Search Filter'); + expect(filterInputElm.ariaLabel).toBe('Number Search Filter'); }); it('should initialize the filter and expect an input of type number', () => { diff --git a/packages/common/src/filters/__tests__/inputPasswordFilter.spec.ts b/packages/common/src/filters/__tests__/inputPasswordFilter.spec.ts index e31a6d647..ac3e7d0be 100644 --- a/packages/common/src/filters/__tests__/inputPasswordFilter.spec.ts +++ b/packages/common/src/filters/__tests__/inputPasswordFilter.spec.ts @@ -55,7 +55,7 @@ describe('InputPasswordFilter', () => { filter.init(filterArguments); const filterInputElm = divContainer.querySelector('input.filter-passwordField') as HTMLInputElement; - expect(filterInputElm.getAttribute('aria-label')).toBe('Password Field Search Filter'); + expect(filterInputElm.ariaLabel).toBe('Password Field Search Filter'); }); it('should initialize the filter and expect an input of type password', () => { diff --git a/packages/common/src/filters/compoundInputFilter.ts b/packages/common/src/filters/compoundInputFilter.ts index 66cef7500..3a9aeef3d 100644 --- a/packages/common/src/filters/compoundInputFilter.ts +++ b/packages/common/src/filters/compoundInputFilter.ts @@ -19,11 +19,11 @@ 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; protected _inputType = 'text'; + protected _timer?: NodeJS.Timeout; protected _filterElm!: HTMLDivElement; protected _filterInputElm!: HTMLInputElement; protected _selectOperatorElm!: HTMLSelectElement; @@ -32,18 +32,12 @@ export class CompoundInputFilter implements Filter { searchTerms: SearchTerm[] = []; columnDef!: Column; callback!: FilterCallback; - timer?: NodeJS.Timeout; filterContainerElm!: HTMLDivElement; constructor(protected readonly translaterService: TranslaterService) { this._bindEventService = new BindingEventService(); } - /** Getter for the Grid Options pulled through the Grid Object */ - protected get gridOptions(): GridOption { - return this.grid?.getOptions?.() ?? {}; - } - /** Getter for the Column Filter */ get columnFilter(): ColumnFilter { return this.columnDef?.filter ?? {}; @@ -74,6 +68,11 @@ export class CompoundInputFilter implements Filter { this._operator = op; } + /** Getter for the Grid Options pulled through the Grid Object */ + protected get gridOptions(): GridOption { + return this.grid?.getOptions?.() ?? {}; + } + /** * Initialize the Filter */ @@ -99,7 +98,7 @@ export class CompoundInputFilter implements Filter { // step 1, create the DOM Element of the filter which contain the compound Operator+Input // and initialize it if searchTerm is filled - this._filterElm = this.createDomElement(searchTerm); + this._filterElm = this.createDomFilterElement(searchTerm); // step 3, subscribe to the keyup event and run the callback when that happens // also add/remove "filled" class for styling purposes @@ -113,15 +112,14 @@ export class CompoundInputFilter implements Filter { */ clear(shouldTriggerQuery = true) { if (this._filterElm && this._selectOperatorElm) { - this._clearFilterTriggered = true; this._shouldTriggerQuery = shouldTriggerQuery; this.searchTerms = []; - this._selectOperatorElm.selectedIndex = 0; this._filterInputElm.value = ''; + this._selectOperatorElm.selectedIndex = 0; this._currentValue = undefined; - this.onTriggerEvent(undefined); this._filterElm.classList.remove('filled'); this._filterInputElm.classList.remove('filled'); + this.onTriggerEvent(undefined, true); } } @@ -168,7 +166,7 @@ export class CompoundInputFilter implements Filter { // protected functions // ------------------ - protected buildInputElement(): HTMLInputElement { + protected buildInputElement(searchTerm?: SearchTerm): HTMLInputElement { const columnId = this.columnDef?.id ?? ''; // create the DOM element & add an ID and filter class @@ -177,12 +175,19 @@ export class CompoundInputFilter implements Filter { placeholder = this.columnFilter.placeholder; } + const searchVal = `${searchTerm ?? ''}`; const inputElm = createDomElement('input', { type: this._inputType || 'text', autocomplete: 'none', placeholder, + ariaLabel: this.columnFilter?.ariaLabel ?? `${toSentenceCase(columnId + '')} Search Filter`, className: `form-control compound-input filter-${columnId}`, + value: searchVal, + dataset: { columnid: `${columnId}` } }); - inputElm.setAttribute('aria-label', this.columnFilter?.ariaLabel ?? `${toSentenceCase(columnId + '')} Search Filter`); + + if (searchTerm !== undefined) { + this._currentValue = searchVal; + } return inputElm; } @@ -214,27 +219,20 @@ export class CompoundInputFilter implements Filter { /** * Create the DOM element */ - protected createDomElement(searchTerm?: SearchTerm) { + protected createDomFilterElement(searchTerm?: SearchTerm) { const columnId = this.columnDef?.id ?? ''; emptyElement(this.filterContainerElm); // create the DOM Select dropdown for the Operator this._selectOperatorElm = buildSelectOperator(this.getOperatorOptionValues(), this.gridOptions); - this._filterInputElm = this.buildInputElement(); + this._filterInputElm = this.buildInputElement(searchTerm); const emptySpanElm = createDomElement('span'); const filterContainerElm = createDomElement('div', { className: `form-group search-filter filter-${columnId}` }); const containerInputGroupElm = createDomElement('div', { className: 'input-group' }); const operatorInputGroupAddonElm = createDomElement('div', { className: 'input-group-addon input-group-prepend operator' }); - /* the DOM element final structure will be -
-
- -
- -
- */ + // append operator & input DOM element operatorInputGroupAddonElm.appendChild(this._selectOperatorElm); containerInputGroupElm.appendChild(operatorInputGroupAddonElm); containerInputGroupElm.appendChild(this._filterInputElm); @@ -243,13 +241,6 @@ export class CompoundInputFilter implements Filter { // create the DOM element & add an ID and filter class filterContainerElm.appendChild(containerInputGroupElm); - this._filterInputElm.dataset.columnid = `${columnId}`; - const searchVal = `${searchTerm ?? ''}`; - this._filterInputElm.value = searchVal; - if (searchTerm !== undefined) { - this._currentValue = searchVal; - } - if (this.operator) { const operatorShorthand = mapOperatorToShorthandDesignation(this.operator); this._selectOperatorElm.value = operatorShorthand; @@ -272,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 ?? ''; @@ -298,8 +289,8 @@ export class CompoundInputFilter implements Filter { const skipCompoundOperatorFilterWithNullInput = this.columnFilter.skipCompoundOperatorFilterWithNullInput ?? this.gridOptions.skipCompoundOperatorFilterWithNullInput; if (!skipCompoundOperatorFilterWithNullInput || this._currentValue !== undefined) { if (typingDelay > 0) { - clearTimeout(this.timer as NodeJS.Timeout); - this.timer = setTimeout(() => this.callback(event, callbackArgs), typingDelay); + clearTimeout(this._timer as NodeJS.Timeout); + this._timer = setTimeout(() => this.callback(event, callbackArgs), typingDelay); } else { this.callback(event, callbackArgs); } @@ -307,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 5f9c2e45b..7f30e957b 100644 --- a/packages/common/src/filters/inputFilter.ts +++ b/packages/common/src/filters/inputFilter.ts @@ -15,12 +15,11 @@ 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'; protected _timer?: NodeJS.Timeout; - protected _filterElm!: HTMLInputElement; + protected _filterInputElm!: HTMLInputElement; grid!: SlickGrid; searchTerms: SearchTerm[] = []; columnDef!: Column; @@ -33,7 +32,7 @@ export class InputFilter implements Filter { /** Getter for the Column Filter */ get columnFilter(): ColumnFilter { - return this.columnDef && this.columnDef.filter || {}; + return this.columnDef?.filter ?? {}; } /** Getter to know what would be the default operator when none is specified */ @@ -65,7 +64,7 @@ export class InputFilter implements Filter { /** Getter for the Grid Options pulled through the Grid Object */ protected get gridOptions(): GridOption { - return (this.grid && this.grid.getOptions) ? this.grid.getOptions() : {}; + return this.grid?.getOptions?.() ?? {}; } /** @@ -90,25 +89,24 @@ export class InputFilter implements Filter { const searchTerm = (Array.isArray(this.searchTerms) && this.searchTerms.length >= 0) ? this.searchTerms[0] : ''; // step 1, create the DOM Element of the filter & initialize it if searchTerm is filled - this._filterElm = this.createDomElement(searchTerm); + this.createDomFilterElement(searchTerm); // step 2, subscribe to the input event and run the callback when that happens // also add/remove "filled" class for styling purposes // we'll use all necessary events to cover the following (keyup, change, mousewheel & spinner) - this._bindEventService.bind(this._filterElm, ['keyup', 'blur', 'change', 'wheel'], this.handleInputChange.bind(this)); + this._bindEventService.bind(this._filterInputElm, ['keyup', 'blur', 'change', 'wheel'], this.onTriggerEvent.bind(this) as EventListener); } /** * Clear the filter value */ clear(shouldTriggerQuery = true) { - if (this._filterElm) { - this._clearFilterTriggered = true; + if (this._filterInputElm) { this._shouldTriggerQuery = shouldTriggerQuery; this.searchTerms = []; - this._filterElm.value = ''; - this._filterElm.classList.remove('filled'); - this._filterElm.dispatchEvent(new Event('change')); + this._filterInputElm.value = ''; + this._filterInputElm.classList.remove('filled'); + this.onTriggerEvent(undefined, true); } } @@ -117,11 +115,11 @@ export class InputFilter implements Filter { */ destroy() { this._bindEventService.unbindAll(); - this._filterElm?.remove?.(); + this._filterInputElm?.remove?.(); } getValues(): string { - return this._filterElm.value; + return this._filterInputElm.value; } /** Set value(s) on the DOM element */ @@ -130,9 +128,9 @@ export class InputFilter implements Filter { let searchValue: SearchTerm = ''; for (const value of searchValues) { searchValue = operator ? this.addOptionalOperatorIntoSearchString(value, operator) : value; - this._filterElm.value = `${searchValue ?? ''}`; + this._filterInputElm.value = `${searchValue ?? ''}`; } - this.getValues() !== '' ? this._filterElm.classList.add('filled') : this._filterElm.classList.remove('filled'); + this.getValues() !== '' ? this._filterInputElm.classList.add('filled') : this._filterInputElm.classList.remove('filled'); // set the operator when defined this.operator = operator || this.defaultOperator; @@ -188,7 +186,7 @@ export class InputFilter implements Filter { * @param {Object} searchTerm - filter search term * @returns {Object} DOM element filter */ - protected createDomElement(searchTerm?: SearchTerm) { + protected createDomFilterElement(searchTerm?: SearchTerm) { const columnId = this.columnDef?.id ?? ''; emptyElement(this.filterContainerElm); @@ -198,36 +196,36 @@ export class InputFilter implements Filter { placeholder = this.columnFilter.placeholder; } - const inputElm = createDomElement('input', { + this._filterInputElm = createDomElement('input', { type: this._inputType || 'text', autocomplete: 'none', placeholder, + ariaLabel: this.columnFilter?.ariaLabel ?? `${toSentenceCase(columnId + '')} Search Filter`, className: `form-control search-filter filter-${columnId}`, - value: (searchTerm ?? '') as string, + value: `${searchTerm ?? ''}`, dataset: { columnid: `${columnId}` } }); - inputElm.setAttribute('aria-label', this.columnFilter?.ariaLabel ?? `${toSentenceCase(columnId + '')} Search Filter`); // if there's a search term, we will add the "filled" class for styling purposes if (searchTerm) { - inputElm.classList.add('filled'); + this._filterInputElm.classList.add('filled'); } // append the new DOM element to the header row & an empty span - this.filterContainerElm.appendChild(inputElm); + this.filterContainerElm.appendChild(this._filterInputElm); this.filterContainerElm.appendChild(document.createElement('span')); - return inputElm; + return this._filterInputElm; } /** * Event handler to cover the following (keyup, change, mousewheel & spinner) * We will trigger the Filter Service callback from this handler */ - protected handleInputChange(event: Event) { - if (this._clearFilterTriggered) { - this.callback(event, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery }); - this._filterElm.classList.remove('filled'); + 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 ?? ''; let value = (event?.target as HTMLInputElement)?.value ?? ''; @@ -235,7 +233,7 @@ export class InputFilter implements Filter { if (typeof value === 'string' && enableWhiteSpaceTrim) { value = value.trim(); } - value === '' ? this._filterElm.classList.remove('filled') : this._filterElm.classList.add('filled'); + value === '' ? this._filterInputElm.classList.remove('filled') : this._filterInputElm.classList.add('filled'); const callbackArgs = { columnDef: this.columnDef, operator: this.operator, searchTerms: [value], shouldTriggerQuery: this._shouldTriggerQuery }; const typingDelay = (eventType === 'keyup' && (event as KeyboardEvent)?.key !== 'Enter') ? this._debounceTypingDelay : 0; @@ -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 df3d21643..12e9139f2 100644 --- a/packages/common/src/filters/inputMaskFilter.ts +++ b/packages/common/src/filters/inputMaskFilter.ts @@ -44,19 +44,19 @@ export class InputMaskFilter extends InputFilter { const searchTerm = (Array.isArray(this.searchTerms) && this.searchTerms.length >= 0) ? this.searchTerms[0] : ''; // step 1, create the DOM Element of the filter & initialize it if searchTerm is filled - this._filterElm = this.createDomElement(searchTerm); + this.createDomFilterElement(searchTerm); // step 2, subscribe to the input event and run the callback when that happens // also add/remove "filled" class for styling purposes // we'll use all necessary events to cover the following (keyup, change, mousewheel & spinner) - this._bindEventService.bind(this._filterElm, ['keyup', 'blur', 'change'], this.handleInputChange.bind(this)); + this._bindEventService.bind(this._filterInputElm, ['keyup', 'blur', 'change'], this.onTriggerEvent.bind(this) as EventListener); } /** * Event handler to cover the following (keyup, change, mousewheel & spinner) * We will trigger the Filter Service callback from this handler */ - protected handleInputChange(event: Event) { + protected onTriggerEvent(event?: MouseEvent | KeyboardEvent, isClearFilterEvent = false) { let value = ''; if ((event?.target as HTMLInputElement)?.value) { let targetValue = (event?.target as HTMLInputElement)?.value ?? ''; @@ -72,20 +72,19 @@ export class InputMaskFilter extends InputFilter { value = unmaskedValue; if ((event as KeyboardEvent)?.keyCode >= 48) { - this._filterElm.value = maskedValue; // replace filter string with masked string - event.preventDefault(); + this._filterInputElm.value = maskedValue; // replace filter string with masked string + event!.preventDefault(); } } - if (this._clearFilterTriggered) { - this.callback(event, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery }); - this._filterElm.classList.remove('filled'); + if (isClearFilterEvent) { + this.callback(event, { columnDef: this.columnDef, clearFilterTriggered: isClearFilterEvent, shouldTriggerQuery: this._shouldTriggerQuery }); + this._filterInputElm.classList.remove('filled'); } else { - this._filterElm.classList.add('filled'); + 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; }