From aff2ead2bb41270af1f71b96c62d255317360824 Mon Sep 17 00:00:00 2001 From: Ghislain Beaulac Date: Mon, 14 Sep 2020 09:49:08 -0400 Subject: [PATCH] fix(editors): update to latest Flatpickr version --- package.json | 2 +- .../editors/__tests__/dateEditor.spec.ts | 14 ++++++++++++ .../angular-slickgrid/editors/dateEditor.ts | 7 +++++- .../__tests__/compoundDateFilter.spec.ts | 20 ++++++++--------- .../filters/__tests__/dateRangeFilter.spec.ts | 22 +++++++++---------- .../styles/slick-plugins.scss | 21 +++++++++++------- 6 files changed, 55 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index b4dd9ffa0..83c8d1e63 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,7 @@ "dependencies": { "dompurify": "^2.0.12", "excel-builder-webpacker": "^1.0.6", - "flatpickr": "4.6.3", + "flatpickr": "^4.6.6", "font-awesome": "^4.7.0", "jquery": "^3.5.1", "jquery-ui-dist": "^1.12.1", diff --git a/src/app/modules/angular-slickgrid/editors/__tests__/dateEditor.spec.ts b/src/app/modules/angular-slickgrid/editors/__tests__/dateEditor.spec.ts index 533ccb0a3..4a1091701 100644 --- a/src/app/modules/angular-slickgrid/editors/__tests__/dateEditor.spec.ts +++ b/src/app/modules/angular-slickgrid/editors/__tests__/dateEditor.spec.ts @@ -113,6 +113,20 @@ describe('DateEditor', () => { expect(editorCount).toBe(1); }); + it('should initialize the editor and focus on the element after a small delay', (done) => { + const focusSpy = jest.spyOn(editor, 'focus'); + const showSpy = jest.spyOn(editor, 'focus'); + editor = new DateEditor(editorArguments); + const editorCount = divContainer.querySelectorAll('input.editor-text.editor-startDate').length; + + setTimeout(() => { + expect(editorCount).toBe(1); + expect(focusSpy).toHaveBeenCalled(); + expect(showSpy).toHaveBeenCalled(); + done(); + }, 51); + }); + it('should have a placeholder when defined in its column definition', () => { const testValue = 'test placeholder'; mockColumn.internalColumnEditor.placeholder = testValue; diff --git a/src/app/modules/angular-slickgrid/editors/dateEditor.ts b/src/app/modules/angular-slickgrid/editors/dateEditor.ts index ef07e8364..dd9d44215 100644 --- a/src/app/modules/angular-slickgrid/editors/dateEditor.ts +++ b/src/app/modules/angular-slickgrid/editors/dateEditor.ts @@ -130,6 +130,11 @@ export class DateEditor implements Editor { // when we're using an alternate input to display data, we'll consider this input as the one to do the focus later on // else just use the top one this._$inputWithData = (this._pickerMergedOptions && this._pickerMergedOptions.altInput) ? $(`${inputCssClasses}.flatpickr-alt-input`) : this._$input; + + setTimeout(() => { + this.show(); + this.focus(); + }, 50); } } @@ -158,7 +163,7 @@ export class DateEditor implements Editor { } show() { - if (this.flatInstance && typeof this.flatInstance.open === 'function') { + if (this.flatInstance && typeof this.flatInstance.open === 'function' && this.flatInstance._input) { this.flatInstance.open(); } } diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/compoundDateFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/compoundDateFilter.spec.ts index 79d9a0c39..6ab30790a 100644 --- a/src/app/modules/angular-slickgrid/filters/__tests__/compoundDateFilter.spec.ts +++ b/src/app/modules/angular-slickgrid/filters/__tests__/compoundDateFilter.spec.ts @@ -88,7 +88,7 @@ describe('CompoundDateFilter', () => { mockColumn.filter.placeholder = testValue; filter.init(filterArguments); - const filterElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + const filterElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.input'); expect(filterElm.placeholder).toBe(testValue); }); @@ -160,7 +160,7 @@ describe('CompoundDateFilter', () => { const spyCallback = jest.spyOn(filterArguments, 'callback'); filter.init(filterArguments); - const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.input'); filterInputElm.value = '2001-01-02T16:02:02.239Z'; filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true })); const filterFilledElms = divContainer.querySelectorAll('.form-group.search-filter.filter-finish.filled'); @@ -177,7 +177,7 @@ describe('CompoundDateFilter', () => { const spyCallback = jest.spyOn(filterArguments, 'callback'); filter.init(filterArguments); - const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.input'); filterInputElm.value = '2001-01-02T16:02:02.239Z'; filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true })); const filterFilledElms = divContainer.querySelectorAll('.form-group.search-filter.filter-finish.filled'); @@ -192,7 +192,7 @@ describe('CompoundDateFilter', () => { const spyCallback = jest.spyOn(filterArguments, 'callback'); filter.init(filterArguments); - const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.input'); filterInputElm.focus(); filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true })); @@ -227,7 +227,7 @@ describe('CompoundDateFilter', () => { const spyCallback = jest.spyOn(filterArguments, 'callback'); filter.init(filterArguments); - const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.input'); const calendarElm = document.body.querySelector('.flatpickr-calendar'); const selectonOptionElms = calendarElm.querySelectorAll(' .flatpickr-monthDropdown-months option'); @@ -254,7 +254,7 @@ describe('CompoundDateFilter', () => { mockColumn.filter.operator = '<='; filter.init(filterArguments); - const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.input'); const calendarElm = document.body.querySelector('.flatpickr-calendar'); const selectonOptionElms = calendarElm.querySelectorAll(' .flatpickr-monthDropdown-months option'); @@ -274,7 +274,7 @@ describe('CompoundDateFilter', () => { filter.init(filterArguments); filter.clear(); - const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.input'); const filterFilledElms = divContainer.querySelectorAll('.form-group.search-filter.filter-finish.filled'); expect(filterInputElm.value).toBe(''); @@ -288,7 +288,7 @@ describe('CompoundDateFilter', () => { filter.init(filterArguments); filter.clear(false); - const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.input'); const filterFilledElms = divContainer.querySelectorAll('.form-group.search-filter.filter-finish.filled'); expect(filterInputElm.value).toBe(''); @@ -303,7 +303,7 @@ describe('CompoundDateFilter', () => { const spyCallback = jest.spyOn(filterArguments, 'callback'); filter.init(filterArguments); - const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.input'); filterInputElm.value = '2001-01-02T16:02:02.000+05:00'; filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true })); const filterFilledElms = divContainer.querySelectorAll('.form-group.search-filter.filter-finish.filled'); @@ -323,7 +323,7 @@ describe('CompoundDateFilter', () => { const spyCallback = jest.spyOn(filterArguments, 'callback'); filter.init(filterArguments); - const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.flatpickr'); + const filterInputElm = divContainer.querySelector('.search-filter.filter-finish .flatpickr input.input'); filterInputElm.focus(); filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true })); diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/dateRangeFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/dateRangeFilter.spec.ts index ccc57aaa1..55b73a5c4 100644 --- a/src/app/modules/angular-slickgrid/filters/__tests__/dateRangeFilter.spec.ts +++ b/src/app/modules/angular-slickgrid/filters/__tests__/dateRangeFilter.spec.ts @@ -77,7 +77,7 @@ describe('DateRangeFilter', () => { it('should initialize the filter', () => { filter.init(filterArguments); - const filterCount = divContainer.querySelectorAll('input.flatpickr.search-filter.filter-finish').length; + const filterCount = divContainer.querySelectorAll('.flatpickr.search-filter.filter-finish').length; expect(spyGetHeaderRow).toHaveBeenCalled(); expect(filterCount).toBe(1); @@ -151,7 +151,7 @@ describe('DateRangeFilter', () => { const spyCallback = jest.spyOn(filterArguments, 'callback'); filter.init(filterArguments); - const filterInputElm = divContainer.querySelector('input.flatpickr.search-filter.filter-finish'); + const filterInputElm = divContainer.querySelector('.flatpickr.search-filter.filter-finish input.input'); filterInputElm.value = '2001-01-02T16:02:02.239Z to 2001-01-31T16:02:02.239Z'; filterInputElm.dispatchEvent(new CustomEvent('change')); filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true })); @@ -167,7 +167,7 @@ describe('DateRangeFilter', () => { const spyCallback = jest.spyOn(filterArguments, 'callback'); filter.init(filterArguments); - const filterInputElm = divContainer.querySelector('input.flatpickr.search-filter.filter-finish'); + const filterInputElm = divContainer.querySelector('.flatpickr.search-filter.filter-finish input.input'); filterInputElm.value = '2001-01-02T16:02:02.239Z to 2001-01-31T16:02:02.239Z'; filterInputElm.dispatchEvent(new CustomEvent('change')); filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true })); @@ -183,7 +183,7 @@ describe('DateRangeFilter', () => { const spyCallback = jest.spyOn(filterArguments, 'callback'); filter.init(filterArguments); - const filterInputElm = divContainer.querySelector('input.flatpickr.search-filter.filter-finish'); + const filterInputElm = divContainer.querySelector('.flatpickr.search-filter.filter-finish input.input'); filterInputElm.focus(); filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true })); @@ -200,7 +200,7 @@ describe('DateRangeFilter', () => { const spyCallback = jest.spyOn(filterArguments, 'callback'); filter.init(filterArguments); - const filterInputElm = divContainer.querySelector('input.flatpickr.search-filter.filter-finish'); + const filterInputElm = divContainer.querySelector('.flatpickr.search-filter.filter-finish input.input'); filterInputElm.focus(); filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true })); @@ -218,7 +218,7 @@ describe('DateRangeFilter', () => { const spyCallback = jest.spyOn(filterArguments, 'callback'); filter.init(filterArguments); - const filterInputElm = divContainer.querySelector('input.flatpickr.search-filter.filter-finish'); + const filterInputElm = divContainer.querySelector('.flatpickr.search-filter.filter-finish input.input'); const calendarElm = document.body.querySelector('.flatpickr-calendar'); const selectonOptionElms = calendarElm.querySelectorAll(' .flatpickr-monthDropdown-months option'); @@ -244,7 +244,7 @@ describe('DateRangeFilter', () => { mockColumn.filter.operator = 'RangeInclusive'; filter.init(filterArguments); - const filterInputElm = divContainer.querySelector('input.flatpickr.search-filter.filter-finish'); + const filterInputElm = divContainer.querySelector('.flatpickr.search-filter.filter-finish input.input'); const calendarElm = document.body.querySelector('.flatpickr-calendar'); const selectonOptionElms = calendarElm.querySelectorAll(' .flatpickr-monthDropdown-months option'); @@ -264,7 +264,7 @@ describe('DateRangeFilter', () => { filter.init(filterArguments); filter.clear(); - const filterInputElm = divContainer.querySelector('input.flatpickr.search-filter.filter-finish'); + const filterInputElm = divContainer.querySelector('.flatpickr.search-filter.filter-finish input.input'); const filterFilledElms = divContainer.querySelectorAll('.flatpickr.search-filter.filter-finish.filled'); expect(filterInputElm.value).toBe(''); @@ -278,7 +278,7 @@ describe('DateRangeFilter', () => { filter.init(filterArguments); filter.clear(false); - const filterInputElm = divContainer.querySelector('input.flatpickr.search-filter.filter-finish'); + const filterInputElm = divContainer.querySelector('.flatpickr.search-filter.filter-finish input.input'); const filterFilledElms = divContainer.querySelectorAll('.flatpickr.search-filter.filter-finish.filled'); expect(filterInputElm.value).toBe(''); @@ -293,7 +293,7 @@ describe('DateRangeFilter', () => { const spyCallback = jest.spyOn(filterArguments, 'callback'); filter.init(filterArguments); - const filterInputElm = divContainer.querySelector('input.flatpickr.search-filter.filter-finish'); + const filterInputElm = divContainer.querySelector('.flatpickr.search-filter.filter-finish input.input'); filterInputElm.value = '2000-01-01T05:00:00.000+05:00 to 2000-01-31T05:00:00.000+05:00'; filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true })); const filterFilledElms = divContainer.querySelectorAll('.flatpickr.search-filter.filter-finish.filled'); @@ -313,7 +313,7 @@ describe('DateRangeFilter', () => { const spyCallback = jest.spyOn(filterArguments, 'callback'); filter.init(filterArguments); - const filterInputElm = divContainer.querySelector('input.flatpickr.search-filter.filter-finish'); + const filterInputElm = divContainer.querySelector('.flatpickr.search-filter.filter-finish input.input'); filterInputElm.focus(); filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true })); diff --git a/src/app/modules/angular-slickgrid/styles/slick-plugins.scss b/src/app/modules/angular-slickgrid/styles/slick-plugins.scss index 8fd897e36..260e01f5a 100644 --- a/src/app/modules/angular-slickgrid/styles/slick-plugins.scss +++ b/src/app/modules/angular-slickgrid/styles/slick-plugins.scss @@ -473,12 +473,12 @@ .slick-column-name, .slick-cell-checkboxsel { text-align: center; - #filter-checkbox-selectall-container { display: flex; align-items: center; justify-content: center; height: 100%; + // line-height: 0; } input[type=checkbox], @@ -537,6 +537,7 @@ .ms-choice { border: $multiselect-input-filter-border; background-color: transparent; + font-size: $header-font-size; div { &:before { @@ -727,20 +728,24 @@ input.search-filter { // ---------------------------------------------- .search-filter .flatpickr { + input.form-control { + cursor: pointer; + } + .flatpickr { flex: 1; cursor: pointer; input.flatpickr.form-control, .flatpickr-input.form-control { + background-color: $flatpickr-bgcolor; + font-family: $filter-placeholder-font-family; + font-size: $font-size-base; + border-radius: $compound-filter-border-radius; + width: 100%; + &[readonly] { background-color: $flatpickr-bgcolor; - font-family: $filter-placeholder-font-family; - font-size: $font-size-base; - border-radius: $compound-filter-border-radius; - width: 100%; - &[readonly] { - background-color: $flatpickr-bgcolor; - } + } } .flatpickr.form-control[readonly] { background-color: $flatpickr-bgcolor;