Skip to content

Commit

Permalink
feat(filters): add optional filterTypingDebounce for filters w/keyup (
Browse files Browse the repository at this point in the history 
#289)
  • Loading branch information
@ghiscoding
ghiscoding authored Mar 18, 2021
1 parent 3fad4fe commit 3aecc89
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 11 deletions.
18 changes: 9 additions & 9 deletions packages/common/src/filters/__tests__/inputMaskFilter.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
});
Expand All @@ -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 });
Expand All @@ -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 });
Expand All @@ -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 });
Expand All @@ -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 });
Expand All @@ -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 });
Expand All @@ -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 });
Expand All @@ -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 });
Expand All @@ -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 });
});
Expand Down
4 changes: 2 additions & 2 deletions packages/common/src/filters/inputMaskFilter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 3aecc89

Please sign in to comment.