Merge branch 'master' into mkirova/partial-fix-13993

Author: ChronosSF

.github/workflows/codeql-analysis.yml

@@ -13,10 +13,10 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ master, 18.1.x, 17.2.x, 16.1.x, 15.1.x ]
+    branches: [ master, 18.2.x, 17.2.x, 16.1.x, 15.1.x ]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ master, 18.1.x, 17.2.x, 16.1.x, 15.1.x ]
+    branches: [ master, 18.2.x, 17.2.x, 16.1.x, 15.1.x ]
   schedule:
     - cron: '33 4 * * 4'
 

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -179,17 +179,11 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
             return;
         }
         const selection = this.selectionService.get(this._id);
+        this.selectionService.clear(this._id);
         this._id = value;
         if (selection) {
             this.selectionService.set(this._id, selection);
         }
-        if (this.dropdown?.open) {
-            this.dropdown.close();
-        }
-        if (this.inputGroup?.isFocused) {
-            this.inputGroup.element.nativeElement.blur();
-            this.inputGroup.isFocused = false;
-        }
     }
 
     /**
@@ -1208,15 +1202,15 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
         this.searchValue = '';
         if (!e.event) {
             this.comboInput?.nativeElement.focus();
+        } else {
+            this._onTouchedCallback();
+            this.updateValidity();
         }
     }
 
     /** @hidden @internal */
     public handleClosed() {
         this.closed.emit({ owner: this });
-        if(this.comboInput.nativeElement !== this.document.activeElement){
-            this.validateComboState();
-        }
     }
 
     /** @hidden @internal */
@@ -1256,15 +1250,10 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
     public onBlur() {
         if (this.collapsed) {
             this._onTouchedCallback();
-            this.validateComboState();
+            this.updateValidity();
         }
     }
 
-    /** @hidden @internal */
-    public onFocus(): void {
-        this._onTouchedCallback();
-    }
-
     /** @hidden @internal */
     public setActiveDescendant(): void {
         this.activeDescendant = this.dropdown.focusedItem?.id || '';
@@ -1289,7 +1278,7 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
         this.manageRequiredAsterisk();
     };
 
-    private validateComboState() {
+    private updateValidity() {
         if (this.ngControl && this.ngControl.invalid) {
             this.valid = IgxInputState.INVALID;
         } else {

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -13,8 +13,7 @@
             role="combobox" aria-haspopup="listbox"
             [attr.aria-expanded]="!dropdown.collapsed" [attr.aria-controls]="dropdown.listId"
             [attr.aria-labelledby]="ariaLabelledBy || label?.id || placeholder"
-            (blur)="onBlur()"
-            (focus)="onFocus()" />
+            (blur)="onBlur()" />
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix"></ng-content>
     </ng-container>

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -3615,7 +3615,7 @@ describe('igxCombo', () => {
                     combo.open();
                     input.triggerEventHandler('focus', {});
                     fixture.detectChanges();
-                    expect(ngModel.touched).toBeTrue();
+                    expect(ngModel.touched).toBeFalse();
                     combo.searchInput.nativeElement.focus();
                     fixture.detectChanges();
                     const documentClickEvent = new MouseEvent('click', { bubbles: true });

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -2277,9 +2277,6 @@ export abstract class IgxGridBaseDirective implements GridType,
             this._allowFiltering = value;
             this.filteringService.registerSVGIcons();
 
-            if (!this._init) {
-                this.calcGridHeadRow();
-            }
 
             this.filteringService.isFilterRowVisible = false;
             this.filteringService.filteredColumn = null;
@@ -6859,25 +6856,11 @@ export abstract class IgxGridBaseDirective implements GridType,
         }
     }
 
-    /**
-     * @hidden
-     * @internal
-     */
-    protected calcGridHeadRow() {
-        if (this.maxLevelHeaderDepth) {
-            this._baseFontSize = parseFloat(getComputedStyle(this.document.documentElement).getPropertyValue('font-size'));
-            const hasFilterRow = this._allowFiltering && this._filterMode === FilterMode.quickFilter;
-            const minSize = (this.maxLevelHeaderDepth + 1 + (hasFilterRow ? 1 : 0)) * this.defaultRowHeight / this._baseFontSize;
-            this.theadRow.nativeElement.style.minHeight = `${minSize}rem`;
-        }
-    }
-
     /**
      * @hidden
      * Sets TBODY height i.e. this.calcHeight
      */
     protected calculateGridHeight() {
-        this.calcGridHeadRow();
 
         this.calcHeight = this._calculateGridBodyHeight();
         if (this.pinnedRowHeight && this.calcHeight) {
@@ -7805,7 +7788,7 @@ export abstract class IgxGridBaseDirective implements GridType,
             } else {
                 this._shouldRecalcRowHeight = true;
             }
-        }
+        } 
     }
 
     // TODO: About to Move to CRUD

projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts

@@ -67,6 +67,19 @@ describe('IgxGrid - multi-column headers #grid', () => {
             expect(grid.getColumnByName('ContactName').level).toEqual(expectedLevel);
         });
 
+        it('should initialize a grid with correct header height', () => {
+            fixture = TestBed.createComponent(ColumnGroupTestComponent);
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+
+            const expectedGridHeaderHeight = 151;
+            const headerHeight = grid.nativeElement
+            .querySelector("igx-grid-header-row")
+            .getBoundingClientRect().height;
+            
+            expect(Math.round(headerHeight)).toEqual(expectedGridHeaderHeight);
+        });
+
         it('Should render column group headers correctly.', fakeAsync(() => {
             fixture = TestBed.createComponent(BlueWhaleGridComponent);
             fixture.detectChanges();

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

@@ -2746,6 +2746,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
 
                 GridFunctions.clickFilterCellChip(fix, 'AnotherField');
                 fix.detectChanges();
+                grid.cdr.detectChanges();
 
                 // check if it is positioned at the bottom of the thead.
                 const theadWrapper = grid.theadRow.nativeElement.firstElementChild;

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts

@@ -109,15 +109,6 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
         return this.selected;
     }
 
-    @HostBinding('style.height.rem')
-    public get height() {
-        if (!this.grid.hasColumnGroups || this.grid.type === 'pivot') {
-            return null;
-        }
-
-        return (this.grid.maxLevelHeaderDepth + 1 - this.column.level) * this.grid.defaultRowHeight / this.grid._baseFontSize;
-    }
-
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts

@@ -2106,13 +2106,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         }
     }
 
-    /**
-     * @hidden
-     * @internal
-     */
-    protected override calcGridHeadRow() {
-    }
-
     protected override buildDataView(data: any[]) {
         this._dataView = data;
     }

projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.html

@@ -14,7 +14,7 @@
     [class.igx-nav-drawer--disable-animation]="disableAnimation"
     (click)="close()" #overlay>
 </div>
-<aside role="navigation"
+<nav
     class="igx-nav-drawer__aside"
     [class.igx-nav-drawer__aside--collapsed]="!miniTemplate && !isOpen"
     [class.igx-nav-drawer__aside--mini]="miniTemplate && !isOpen"
@@ -24,5 +24,5 @@
     [class.igx-nav-drawer--disable-animation]="disableAnimation">
 
     <ng-container *ngTemplateOutlet="template || defaultItemsTemplate"></ng-container>
-</aside>
+</nav>
 <div class="igx-nav-drawer__style-dummy" #dummy></div>