Merge branch '18.2.x' into hhristov/fix-simple-combo-tab-focus-18.2

Author: Hristo313

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

@@ -36,7 +36,7 @@
     [width]="itemsWidth || '100%'" (opening)="handleOpening($event)" (closing)="handleClosing($event)"
     (opened)="handleOpened()" (closed)="handleClosed()">
     <div class="igx-combo__search" *ngIf="displaySearchInput">
-        <igx-input-group>
+        <igx-input-group type="line">
             <input igxInput #searchInput name="searchInput" autocomplete="off" type="text"
                    [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
                    (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="getSearchPlaceholderText()"

projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss

@@ -370,7 +370,6 @@
                 content: '';
                 inset: 0;
                 box-shadow: inset 0 0 0 rem(1px) var-get($outlined-theme, 'border-color');
-                z-index: -1;
                 border-radius: inherit;
             }
 

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

@@ -7,7 +7,8 @@ import {
     Output,
     Renderer2,
     booleanAttribute,
-    AfterContentInit
+    AfterContentInit,
+    OnDestroy
 } from '@angular/core';
 import { mkenum } from '../../core/utils';
 import { IBaseEventArgs } from '../../core/utils';
@@ -46,7 +47,7 @@ export type IgxButtonType = typeof IgxButtonType[keyof typeof IgxButtonType];
     selector: '[igxButton]',
     standalone: true
 })
-export class IgxButtonDirective extends IgxButtonBaseDirective implements AfterContentInit {
+export class IgxButtonDirective extends IgxButtonBaseDirective implements AfterContentInit, OnDestroy {
     private static ngAcceptInputType_type: IgxButtonType | '';
 
     /**
@@ -92,6 +93,12 @@ export class IgxButtonDirective extends IgxButtonBaseDirective implements AfterC
      */
     private _selected = false;
 
+    private emitSelected() {
+        this.buttonSelected.emit({
+            button: this
+        });
+    }
+
     /**
      * Gets or sets whether the button is selected.
      * Mainly used in the IgxButtonGroup component and it will have no effect if set separately.
@@ -121,11 +128,11 @@ export class IgxButtonDirective extends IgxButtonBaseDirective implements AfterC
     }
 
     public ngAfterContentInit() {
-        this.nativeElement.addEventListener('click', () => {
-            this.buttonSelected.emit({
-                button: this
-            });
-        });
+        this.nativeElement.addEventListener('click', this.emitSelected.bind(this));
+    }
+
+    public ngOnDestroy(): void {
+        this.nativeElement.removeEventListener('click', this.emitSelected);
     }
 
     /**

projects/igniteui-angular/src/lib/grids/common/crud.service.ts

@@ -684,12 +684,13 @@ export class IgxGridCRUDService extends IgxRowAddCrudState {
             return;
         }
         this.endEdit(true, event);
-
-        if (parentRow != null && this.grid.expansionStates.get(parentRow.key)) {
-            this.grid.collapseRow(parentRow.key);
+        // work with copy of original row, since context may change on collapse.
+        const parentRowCopy = parentRow ? Object.assign(copyDescriptors(parentRow), parentRow) : null;
+        if (parentRowCopy != null && this.grid.expansionStates.get(parentRowCopy.key)) {
+            this.grid.collapseRow(parentRowCopy.key);
         }
 
-        this.createAddRow(parentRow, asChild);
+        this.createAddRow(parentRowCopy, asChild);
 
         this.grid.transactions.startPending();
         if (this.addRowParent.isPinned) {

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-add-row-ui.spec.ts

@@ -9,6 +9,7 @@ import { IgxActionStripComponent } from '../../action-strip/public_api';
 import { IgxTreeGridRowComponent } from './tree-grid-row.component';
 import { first } from 'rxjs/operators';
 import { IRowDataCancelableEventArgs } from '../public_api';
+import { wait } from '../../test-utils/ui-interactions.spec';
 
 describe('IgxTreeGrid - Add Row UI #tGrid', () => {
     configureTestSuite();
@@ -216,5 +217,47 @@ describe('IgxTreeGrid - Add Row UI #tGrid', () => {
             const addedRow = treeGrid.getRowByKey(newRowId);
             expect(addedRow.data[treeGrid.foreignKey]).toBe(2);
         });
+
+        it('should collapse row when child row adding begins and it added row should go under correct parent.', async() => {
+            treeGrid.data = [
+                { ID: 1, ParentID: -1, Name: 'Casey Houston', JobTitle: 'Vice President', Age: 32 },
+                { ID: 2, ParentID: 10, Name: 'Gilberto Todd', JobTitle: 'Director', Age: 41 },
+                { ID: 3, ParentID: 10, Name: 'Tanya Bennett', JobTitle: 'Director', Age: 29 },
+                { ID: 4, ParentID: 6, Name: 'Jack Simon', JobTitle: 'Software Developer', Age: 33 },
+                { ID: 6, ParentID: -1, Name: 'Erma Walsh', JobTitle: 'CEO', Age: 52 },
+                { ID: 7, ParentID: 10, Name: 'Debra Morton', JobTitle: 'Associate Software Developer', Age: 35 },
+                { ID: 9, ParentID: 10, Name: 'Leslie Hansen', JobTitle: 'Associate Software Developer', Age: 44 },
+                { ID: 10, ParentID: -1, Name: 'Eduardo Ramirez', JobTitle: 'Manager', Age: 53 }
+            ];
+            fix.detectChanges();
+            treeGrid.collapseAll();
+            treeGrid.height = "350px";
+            fix.detectChanges();
+            const parentRow1 = treeGrid.rowList.toArray()[1] as IgxTreeGridRowComponent;
+            treeGrid.expandRow(parentRow1.key);
+            const parentRow2 = treeGrid.rowList.toArray()[3] as IgxTreeGridRowComponent;
+            treeGrid.expandRow(parentRow2.key);
+            treeGrid.triggerPipes();
+            fix.detectChanges();
+
+            // scroll bottom
+            treeGrid.verticalScrollContainer.scrollTo(treeGrid.dataView.length - 1);
+            await wait(50);
+            fix.detectChanges();
+            // start add row
+            parentRow2.beginAddChild();
+            fix.detectChanges();
+            // last row should be add row
+            const addRow = treeGrid.gridAPI.get_row_by_index(4);
+            expect(addRow.addRowUI).toBeTrue();
+            endTransition();
+
+            // end edit
+            treeGrid.gridAPI.crudService.endEdit(true);
+            fix.detectChanges();
+
+            // row should be added under correct parent
+            expect(treeGrid.data[treeGrid.data.length - 1].ParentID).toBe(10);
+        });
     });
 });

projects/igniteui-angular/src/lib/input-group/input-group.component.ts

@@ -1,6 +1,5 @@
 import { DOCUMENT, NgIf, NgTemplateOutlet, NgClass, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
 import {
-    AfterViewInit,
     ChangeDetectorRef,
     Component,
     ContentChild,
@@ -36,7 +35,7 @@ import { IgxTheme, THEME_TOKEN, ThemeToken } from '../services/theme/theme.token
     standalone: true,
     imports: [NgIf, NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent, NgSwitch, NgSwitchCase, NgSwitchDefault]
 })
-export class IgxInputGroupComponent implements IgxInputGroupBase, AfterViewInit {
+export class IgxInputGroupComponent implements IgxInputGroupBase {
     /**
      * Sets the resource strings.
      * By default it uses EN resources.
@@ -220,15 +219,13 @@ export class IgxInputGroupComponent implements IgxInputGroupBase, AfterViewInit
         private themeToken: ThemeToken
     ) {
         this._theme = this.themeToken.theme;
-
-        const { unsubscribe } = this.themeToken.onChange((theme) => {
+        const themeChange = this.themeToken.onChange((theme) => {
             if (this._theme !== theme) {
                 this._theme = theme;
                 this.cdr.detectChanges();
             }
         });
-
-        this._destroyRef.onDestroy(() => unsubscribe);
+        this._destroyRef.onDestroy(() => themeChange.unsubscribe());
     }
 
     /** @hidden */
@@ -456,7 +453,7 @@ export class IgxInputGroupComponent implements IgxInputGroupBase, AfterViewInit
     }
 
     /** @hidden @internal */
-    public ngAfterViewInit() {
+    public ngAfterContentChecked() {
         this.setComponentTheme();
     }
 }

projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts

@@ -192,7 +192,8 @@ describe('IgxTimePicker', () => {
             });
 
             mockCdr = jasmine.createSpyObj('ChangeDetectorRef', ['detectChanges']);
-            timePicker = new IgxTimePickerComponent(elementRef, 'en', null, mockInjector, null, mockCdr);
+            const platformUtil = TestBed.inject(PlatformUtil);
+            timePicker = new IgxTimePickerComponent(elementRef, 'en', null, mockInjector, platformUtil, mockCdr);
             (timePicker as any).dateTimeEditor = mockDateTimeEditorDirective;
             (timePicker as any)._inputGroup = mockInputGroup;
             (timePicker as any).inputDirective = mockInputDirective;

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

@@ -1250,7 +1250,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
 
     private subscribeToToggleDirectiveEvents(): void {
         if (this.toggleRef) {
-            if (this._inputGroup) {
+            if (this._inputGroup && this.platform.isBrowser) {
                 this.toggleRef.element.style.width = this._inputGroup.element.nativeElement.getBoundingClientRect().width + 'px';
             }