From 3aecc899ebd78d9597cc4ed4919c0a8dd26673a8 Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Wed, 17 Mar 2021 20:37:15 -0400 Subject: [PATCH] feat(filters): add optional `filterTypingDebounce` for filters w/keyup (#289) --- .../filters/__tests__/inputMaskFilter.spec.ts | 18 +++++++++--------- packages/common/src/filters/inputMaskFilter.ts | 4 ++-- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/common/src/filters/__tests__/inputMaskFilter.spec.ts b/packages/common/src/filters/__tests__/inputMaskFilter.spec.ts index 6852245fb..2f8401866 100644 --- a/packages/common/src/filters/__tests__/inputMaskFilter.spec.ts +++ b/packages/common/src/filters/__tests__/inputMaskFilter.spec.ts @@ -83,7 +83,7 @@ describe('InputMaskFilter', () => { filter.setValues('1234567890'); const filterElm = divContainer.querySelector('input.filter-mask') as HTMLInputElement; filterElm.focus(); - filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true })); + filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true })); expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['1234567890'], shouldTriggerQuery: true }); }); @@ -96,7 +96,7 @@ describe('InputMaskFilter', () => { filter.setValues('1234567890', 'EQ'); const filterElm = divContainer.querySelector('input.filter-mask') as HTMLInputElement; filterElm.focus(); - filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true })); + filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true })); expect(filterElm.value).toBe('(123) 456-7890'); expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['1234567890'], shouldTriggerQuery: true }); @@ -110,7 +110,7 @@ describe('InputMaskFilter', () => { filter.setValues('1234567890abc'); const filterElm = divContainer.querySelector('input.filter-mask') as HTMLInputElement; filterElm.focus(); - filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true })); + filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true })); expect(filterElm.value).toBe('(123) 456-7890'); expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['1234567890'], shouldTriggerQuery: true }); @@ -124,7 +124,7 @@ describe('InputMaskFilter', () => { filter.setValues('1234567890'); const filterElm = divContainer.querySelector('input.filter-mask') as HTMLInputElement; filterElm.focus(); - filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true })); + filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true })); expect(filterElm.value).toBe('(123) 456-7890'); expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['1234567890'], shouldTriggerQuery: true }); @@ -138,7 +138,7 @@ describe('InputMaskFilter', () => { filter.setValues('H1H1H1'); const filterElm = divContainer.querySelector('input.filter-mask') as HTMLInputElement; filterElm.focus(); - filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true })); + filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true })); expect(filterElm.value).toBe('H1H 1H1'); expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['H1H1H1'], shouldTriggerQuery: true }); @@ -153,7 +153,7 @@ describe('InputMaskFilter', () => { filter.setValues(' 1234567890 '); const filterElm = divContainer.querySelector('input.filter-mask') as HTMLInputElement; filterElm.focus(); - filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true })); + filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true })); expect(filterElm.value).toBe('(123) 456-7890'); expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['1234567890'], shouldTriggerQuery: true }); @@ -169,7 +169,7 @@ describe('InputMaskFilter', () => { filter.setValues(' 1234567890 '); const filterElm = divContainer.querySelector('input.filter-mask') as HTMLInputElement; filterElm.focus(); - filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true })); + filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true })); expect(filterElm.value).toBe('(123) 456-7890'); expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['1234567890'], shouldTriggerQuery: true }); @@ -183,7 +183,7 @@ describe('InputMaskFilter', () => { filter.setValues('abc'); const filterElm = divContainer.querySelector('input.filter-mask') as HTMLInputElement; filterElm.focus(); - filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true })); + filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true })); expect(filterElm.value).toBe('() -'); expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: [''], shouldTriggerQuery: true }); @@ -198,7 +198,7 @@ describe('InputMaskFilter', () => { filterElm.focus(); filterElm.value = '1'; - filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true })); + filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { key: 'a', keyCode: 97, bubbles: true, cancelable: true })); expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['1'], shouldTriggerQuery: true }); }); diff --git a/packages/common/src/filters/inputMaskFilter.ts b/packages/common/src/filters/inputMaskFilter.ts index 84fbcc01d..9c20568d5 100644 --- a/packages/common/src/filters/inputMaskFilter.ts +++ b/packages/common/src/filters/inputMaskFilter.ts @@ -48,10 +48,10 @@ export class InputMaskFilter extends InputFilter { // step 2, create the DOM Element of the filter & initialize it if searchTerm is filled this.$filterElm = this.createDomElement(filterTemplate, searchTerm); - // step 3, subscribe to the input change event and run the callback when that happens + // step 3, subscribe to the keyup blur change event and run the callback when that happens // also add/remove "filled" class for styling purposes - this.$filterElm.on('input change', (e: any) => { + this.$filterElm.on('keyup blur change', (e: any) => { let value = ''; if (e && e.target && e.target.value) { let targetValue = e.target.value;