fix(editors): update to latest Flatpickr version

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",

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;

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();
     }
   }

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<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+    const filterElm = divContainer.querySelector<HTMLInputElement>('.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<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.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<HTMLInputElement>('.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<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.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<HTMLInputElement>('.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<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.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<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.input');
     const calendarElm = document.body.querySelector<HTMLDivElement>('.flatpickr-calendar');
     const selectonOptionElms = calendarElm.querySelectorAll<HTMLSelectElement>(' .flatpickr-monthDropdown-months option');
 
@@ -254,7 +254,7 @@ describe('CompoundDateFilter', () => {
     mockColumn.filter.operator = '<=';
 
     filter.init(filterArguments);
-    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.input');
     const calendarElm = document.body.querySelector<HTMLDivElement>('.flatpickr-calendar');
     const selectonOptionElms = calendarElm.querySelectorAll<HTMLSelectElement>(' .flatpickr-monthDropdown-months option');
 
@@ -274,7 +274,7 @@ describe('CompoundDateFilter', () => {
 
     filter.init(filterArguments);
     filter.clear();
-    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.input');
     const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.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<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.input');
     const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.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<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.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<HTMLInputElement>('.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<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.input');
 
     filterInputElm.focus();
     filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));

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<HTMLInputElement>('input.flatpickr.search-filter.filter-finish');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.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<HTMLInputElement>('input.flatpickr.search-filter.filter-finish');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.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<HTMLInputElement>('input.flatpickr.search-filter.filter-finish');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.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<HTMLInputElement>('input.flatpickr.search-filter.filter-finish');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.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<HTMLInputElement>('input.flatpickr.search-filter.filter-finish');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.flatpickr.search-filter.filter-finish input.input');
     const calendarElm = document.body.querySelector<HTMLDivElement>('.flatpickr-calendar');
     const selectonOptionElms = calendarElm.querySelectorAll<HTMLSelectElement>(' .flatpickr-monthDropdown-months option');
 
@@ -244,7 +244,7 @@ describe('DateRangeFilter', () => {
     mockColumn.filter.operator = 'RangeInclusive';
 
     filter.init(filterArguments);
-    const filterInputElm = divContainer.querySelector<HTMLInputElement>('input.flatpickr.search-filter.filter-finish');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.flatpickr.search-filter.filter-finish input.input');
     const calendarElm = document.body.querySelector<HTMLDivElement>('.flatpickr-calendar');
     const selectonOptionElms = calendarElm.querySelectorAll<HTMLSelectElement>(' .flatpickr-monthDropdown-months option');
 
@@ -264,7 +264,7 @@ describe('DateRangeFilter', () => {
 
     filter.init(filterArguments);
     filter.clear();
-    const filterInputElm = divContainer.querySelector<HTMLInputElement>('input.flatpickr.search-filter.filter-finish');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.flatpickr.search-filter.filter-finish input.input');
     const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.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<HTMLInputElement>('input.flatpickr.search-filter.filter-finish');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.flatpickr.search-filter.filter-finish input.input');
     const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.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<HTMLInputElement>('input.flatpickr.search-filter.filter-finish');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.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<HTMLInputElement>('.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<HTMLInputElement>('input.flatpickr.search-filter.filter-finish');
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.flatpickr.search-filter.filter-finish input.input');
 
     filterInputElm.focus();
     filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));

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;