Merge branch '10.2.x' into simeonoff/dock-mgr-drop-shadow

Author: DiyanDimitrov

.github/workflows/nodejs.yml

@@ -5,9 +5,9 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ master, 9.1.x, 10.0.x, 10.1.x ]
+    branches: [ master, '[0-9]+.[0-9]+.x' ]
   pull_request:
-    branches: [ master, 9.1.x, 10.0.x, 10.1.x ]
+    branches: [ master, '[0-9]+.[0-9]+.x' ]
 
 jobs:
   build:

angular.json

@@ -69,6 +69,9 @@
                   "with": "src/environments/environment.hmr.ts"
                 }
               ]
+            },
+            "es5": {
+              "tsConfig": "src/tsconfig-es5.app.json"
             }
           }
         },
@@ -85,6 +88,9 @@
               "hmr": true,
               "hmrWarning": false,
               "browserTarget": "igniteui-dev-demos:build:hmr"
+            },
+            "es5": {
+              "browserTarget": "igniteui-dev-demos:build:es5"
             }
           }
         },

package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve --open --configuration hmr",
+    "start-es5": "ng serve --configuration es5 -o",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts

@@ -139,10 +139,10 @@ describe('igxGridEditingActions #grid ', () => {
             actionStrip = fixture.componentInstance.actionStrip;
             grid = fixture.componentInstance.grid;
         }));
-        it('should auto-show on mouse over of row.', () => {
+        it('should auto-show on mouse enter of row.', () => {
             const row = grid.getRowByIndex(0);
             const rowElem = row.nativeElement;
-            UIInteractions.simulateMouseEvent('mouseover', rowElem, 0, 0);
+            UIInteractions.simulateMouseEvent('mouseenter', rowElem, 0, 0);
             fixture.detectChanges();
 
             expect(actionStrip.context).toBe(row);
@@ -171,18 +171,18 @@ describe('igxGridEditingActions #grid ', () => {
             hierarchicalGrid = fixture.componentInstance.hgrid;
         }));
 
-        it('should auto-show root actionStrip on mouse over of root row.', () => {
+        it('should auto-show root actionStrip on mouse enter of root row.', () => {
             const row = hierarchicalGrid.getRowByIndex(0);
             const rowElem = row.nativeElement;
-            UIInteractions.simulateMouseEvent('mouseover', rowElem, 0, 0);
+            UIInteractions.simulateMouseEvent('mouseenter', rowElem, 0, 0);
             fixture.detectChanges();
 
             expect(actionStripRoot.context).toBe(row);
             expect(actionStripRoot.hidden).toBeFalse();
             expect(actionStripChild.context).toBeUndefined();
         });
 
-        it('should auto-show row island actionStrip on mouse over of child row.', () => {
+        it('should auto-show row island actionStrip on mouse enter of child row.', () => {
             const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
             row.toggle();
             fixture.detectChanges();
@@ -191,7 +191,7 @@ describe('igxGridEditingActions #grid ', () => {
 
             const childRow = childGrid.getRowByIndex(0);
             const rowElem = childRow.nativeElement;
-            UIInteractions.simulateMouseEvent('mouseover', rowElem, 0, 0);
+            UIInteractions.simulateMouseEvent('mouseenter', rowElem, 0, 0);
             fixture.detectChanges();
 
             expect(actionStripChild.context).toBe(childRow);

projects/igniteui-angular/src/lib/core/utils.ts

@@ -328,7 +328,7 @@ export const NAVIGATION_KEYS = new Set([
 ]);
 export const ROW_EXPAND_KEYS = new Set('right down arrowright arrowdown'.split(' '));
 export const ROW_COLLAPSE_KEYS = new Set('left up arrowleft arrowup'.split(' '));
-export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup', '+']);
+export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup', '+', 'add']);
 export const HEADER_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'escape', 'esc' , 'l']);
 
 /**

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -426,7 +426,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         private _moduleRef: NgModuleRef<any>,
         private _injector: Injector,
         private _renderer: Renderer2) {
-        }
+    }
 
 
     /**
@@ -827,7 +827,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         return this._inputGroup || this._inputGroupUserTemplate || null;
     }
 
-     /** @hidden @internal */
+    /** @hidden @internal */
     public get inputDirective(): IgxInputDirective {
         return this._inputDirective || this._inputDirectiveUserTemplates.first || null;
     }
@@ -922,7 +922,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
         this._inputDirectiveUserTemplates.changes.subscribe(() => {
             this.attachTemplateBlur();
-         });
+        });
         this.attachTemplateBlur();
     }
 
@@ -938,8 +938,8 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
                     this.rawDateString = (res.target as HTMLInputElement).value;
                     this.onBlur(res, false);
                 });
-                // TODO: Refactor custom template handling.
-                // Revise blur handling when custom template is passed
+            // TODO: Refactor custom template handling.
+            // Revise blur handling when custom template is passed
         }
     }
 
@@ -1178,6 +1178,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
     /** @hidden @internal */
     public onInput(event) {
+        /**
+         * Fix for #8165 until refactoring (#6483).
+         * The IgxDateTimeEditor will be used to handle all inputs, i.e. this handler will be removed.
+         * It extends the IgxMaskDirective which contains logic that handles this issue.
+         */
+        if (isIE() && !this._isInEditMode && !this.inputGroup.isFocused) { return; }
         const targetValue = event.target.value;
         const cursorPosition = this._getCursorPosition();
         const checkInput = DatePickerUtil.checkForCompleteDateInput(this.dateFormatParts, targetValue);

projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts

@@ -154,7 +154,7 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
     /** @hidden */
     public ngOnInit(): void {
         if (!this.nativeElement.placeholder) {
-          this.renderer.setAttribute(this.nativeElement, 'placeholder', this.maskOptions.format);
+            this.renderer.setAttribute(this.nativeElement, 'placeholder', this.maskOptions.format);
         }
     }
 
@@ -188,7 +188,15 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
     /** @hidden */
     @HostListener('input')
     public onInputChanged(): void {
-        if (isIE() && this._stopPropagation) {
+        /**
+         * '!this._focused' is a fix for #8165
+         * On page load IE triggers input events before focus events and
+         * it does so for every single input on the page.
+         * The mask needs to be prevented from doing anything while this is happening because
+         * the end user will be unable to blur the input.
+         * https://stackoverflow.com/questions/21406138/input-event-triggered-on-internet-explorer-when-placeholder-changed
+         */
+        if (isIE() && (this._stopPropagation || !this._focused)) {
             this._stopPropagation = false;
             return;
         }

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts

@@ -250,9 +250,19 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
      * @hidden @internal
      */
     public onInputKeyDown(event): void {
-        if (event.key === KEYS.ENTER) {
-            event.preventDefault();
-            this.applyFilter();
+        switch (event.key) {
+            case KEYS.ENTER:
+                event.preventDefault();
+                this.applyFilter();
+
+                return;
+            case KEYS.ESCAPE || KEYS.ESCAPE_IE:
+                if (this.searchValue) {
+                    event.stopPropagation();
+                    this.clearInput();
+                }
+
+                return;
         }
     }
 

projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts

@@ -51,7 +51,6 @@ export class IgxGridNavigationService {
             !this.grid.crudService.rowEditingBlocked && !this.grid.rowInEditMode) { return; }
         const shift = event.shiftKey;
         const ctrl = event.ctrlKey;
-        const alt = event.altKey;
         if (NAVIGATION_KEYS.has(key) && this.pendingNavigation) { event.preventDefault(); return; }
 
         const type = this.isDataRow(this.activeNode.row) ? 'dataCell' :
@@ -631,6 +630,6 @@ export class IgxGridNavigationService {
     }
 
     private isAddKey(key: string): boolean {
-        return key === '+';
+        return key === '+' || key === 'add'; // add is for IE and Edge
     }
 }

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -4587,6 +4587,11 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             // Open excel style filtering dialog.
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
 
+            let excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
+
+            // Verify ESF is visible.
+            expect(excelMenu).not.toBeNull();
+
             // Type string in search box.
             const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
             const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent);
@@ -4609,10 +4614,43 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
                 .sort();
 
             // Verify that excel style filtering dialog is closed and data is filtered.
-            expect(fix.debugElement.query(By.css(FILTER_UI_ROW))).toBeNull();
+            excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
+            expect(excelMenu).toBeNull();
             expect(gridCellValues.length).toEqual(4);
             expect(gridCellValues).toEqual(listItems);
         }));
+
+        it('Should clear input if there is text and \'Escape\' is pressed.', fakeAsync(() => {
+            // Open excel style filtering dialog.
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
+
+            let inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            let excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
+
+            // Verify ESF is visible.
+            expect(excelMenu).not.toBeNull();
+
+             // Verify that the dialog is closed on pressing Escape.
+            inputNativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+            excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
+            expect(excelMenu).toBeNull();
+
+            // Open excel style filtering dialog again and type in the input.
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
+            inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, '2', fix);
+
+            // Press Escape again and verify that ESF menu is still visible and the input is empty
+            inputNativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+            inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            fix.detectChanges();
+            flush();
+
+            excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
+            expect(excelMenu).not.toBeNull();
+            expect(inputNativeElement.value).toBe('', 'input isn\'t cleared correctly');
+        }));
 });
 
     describe('Templates: ', () => {