Merge branch 'master' into chore()-readme-update-release-notes

Author: kdinev

projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts

@@ -12,6 +12,8 @@ import {
     IgcPaginatorComponent,
     IgcGridStateComponent,
     IgcColumnLayoutComponent,
+    IgcActionStripComponent,
+    IgcGridEditingActionsComponent,
 } from './components';
 import { defineComponents } from '../utils/register';
 
@@ -27,6 +29,8 @@ describe('Elements: ', () => {
             IgcColumnLayoutComponent,
             IgcPaginatorComponent,
             IgcGridStateComponent,
+            IgcActionStripComponent,
+            IgcGridEditingActionsComponent
         );
     });
 
@@ -230,5 +234,66 @@ describe('Elements: ', () => {
             expect(grid.columns.length).toEqual(6);
             expect(grid.getColumnByVisibleIndex(1).field).toEqual('ProductName');
         });
+
+        it('should not destroy action strip when row it is shown in is destroyed or cached.', async() => {
+            const innerHtml = `
+            <igc-grid id="testGrid" auto-generate>
+            <igc-action-strip id="testStrip">
+                <igc-grid-editing-actions add-row="true"></igc-grid-editing-actions>
+            </igc-action-strip>
+            </igc-grid>`;
+            testContainer.innerHTML = innerHtml;
+
+            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+
+            const grid = document.querySelector<IgcNgElement & InstanceType<typeof IgcGridComponent>>('#testGrid');
+            const actionStrip = document.querySelector<IgcNgElement & InstanceType<typeof IgcActionStripComponent>>('#testStrip');
+            grid.data = SampleTestData.foodProductData();
+
+            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+
+            let row = grid.dataRowList.toArray()[0];
+            actionStrip.show(row);
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+
+            expect(actionStrip.hidden).toBeFalse();
+
+            grid.data = [];
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+
+           // row destroyed
+            expect((row.cdr as any).destroyed).toBeTrue();
+            // action strip still in DOM, only hidden.
+            expect(actionStrip.hidden).toBeTrue();
+            expect(actionStrip.isConnected).toBeTrue();
+
+            grid.data = SampleTestData.foodProductData();
+            grid.groupBy({ fieldName: 'InStock', dir: 1, ignoreCase: false });
+
+            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+
+            row = grid.dataRowList.toArray()[0];
+            actionStrip.show(row);
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+
+            expect(actionStrip.hidden).toBeFalse();
+
+            // collapse all data rows, leave only groups
+            grid.toggleAllGroupRows();
+
+            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+
+            // row not destroyed, but also not in dom anymore
+            expect((row.cdr as any).destroyed).toBeFalse();
+            expect(row.element.nativeElement.isConnected).toBe(false);
+
+             // action strip still in DOM, only hidden.
+            expect(actionStrip.hidden).toBeTrue();
+            expect(actionStrip.isConnected).toBeTrue();
+        });
     });
 });

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

@@ -15,6 +15,7 @@ import { IgxGridPinningActionsComponent } from './grid-pinning-actions.component
 import { IgxActionStripComponent } from '../action-strip.component';
 import { IRowDataCancelableEventArgs, IgxColumnComponent } from '../../grids/public_api';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
+import { SortingDirection } from '../../data-operations/sorting-strategy';
 
 describe('igxGridEditingActions #grid ', () => {
     let fixture;
@@ -274,6 +275,59 @@ describe('igxGridEditingActions #grid ', () => {
 
             expect(actionStrip.hidden).toBeTrue();
         });
+
+        it('should auto-hide on delete action click.', () => {
+            const row = grid.rowList.toArray()[0];
+            actionStrip.show(row);
+            fixture.detectChanges();
+
+            expect(actionStrip.hidden).toBeFalse();
+
+            const deleteIcon = fixture.debugElement.queryAll(By.css(`igx-grid-editing-actions igx-icon`))[1];
+            expect(deleteIcon.nativeElement.innerText).toBe('delete');
+            deleteIcon.parent.triggerEventHandler('click', new Event('click'));
+            fixture.detectChanges();
+
+            expect(actionStrip.hidden).toBeTrue();
+
+        });
+
+        it('should auto-hide if context row is destroyed.', () => {
+            const row = grid.rowList.toArray()[0];
+            actionStrip.show(row);
+            fixture.detectChanges();
+
+            expect(actionStrip.hidden).toBeFalse();
+
+            // bind to no data, which removes all rows.
+            grid.data = [];
+            grid.cdr.detectChanges();
+
+            expect((row.cdr as any).destroyed).toBeTrue();
+            expect(actionStrip.hidden).toBeTrue();
+        });
+
+        it('should auto-hide if context row is cached.', () => {
+            // create group rows
+            grid.groupBy({ fieldName: 'ContactTitle', dir: SortingDirection.Desc, ignoreCase: false });
+            fixture.detectChanges();
+
+            // show for first data row
+            const row = grid.dataRowList.toArray()[0];
+            actionStrip.show(row);
+            fixture.detectChanges();
+
+            // collapse all groups to cache data rows
+            grid.toggleAllGroupRows();
+            fixture.detectChanges();
+
+            // not destroyed, but not in DOM anymore
+            expect((row.cdr as any).destroyed).toBeFalse();
+            expect(row.element.nativeElement.isConnected).toBe(false);
+
+            // action strip should be hidden
+            expect(actionStrip.hidden).toBeTrue();
+        });
     });
 
     describe('auto show/hide in HierarchicalGrid', () => {

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

@@ -6439,6 +6439,12 @@ export abstract class IgxGridBaseDirective implements GridType,
         }
     }
 
+    protected viewDetachHandler(args) {
+        if (this.actionStrip && args.view.rootNodes.find(x => x === this.actionStrip.context?.element.nativeElement)) {
+            this.actionStrip.hide();
+        }
+    }
+
     /**
      * @hidden @internal
      */

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -109,6 +109,7 @@
                 [igxTemplateOutletContext]="getContext(rowData, rowIndex)"
                 (cachedViewLoaded)="cachedViewLoaded($event)"
                 (viewCreated)="viewCreatedHandler($event)"
+                (beforeViewDetach)="viewDetachHandler($event)"
                 (viewMoved)="viewMovedHandler($event)">
             </ng-template>
         </ng-template>

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

@@ -1304,6 +1304,17 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         super.onColumnsAddedOrRemoved();
     }
 
+    /**
+     * @hidden
+     */
+    protected override onColumnsChanged(change: QueryList<IgxColumnComponent>) {
+        super.onColumnsChanged(change);
+
+        if (this.hasColumnLayouts && !(this.navigation instanceof IgxGridMRLNavigationService)) {
+            this._setupNavigationService();
+        }
+    }
+
     /**
      * @hidden @internal
      */

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

@@ -85,7 +85,7 @@
             <ng-template
                 [igxTemplateOutlet]="(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))"
                 [igxTemplateOutletContext]="getContext(rowData, rowIndex, false)" (viewCreated)="viewCreatedHandler($event)"
-                (viewMoved)="viewMovedHandler($event)" (cachedViewLoaded)="cachedViewLoaded($event)">
+                (viewMoved)="viewMovedHandler($event)" (cachedViewLoaded)="cachedViewLoaded($event)" (beforeViewDetach)="viewDetachHandler($event)">
             </ng-template>
             <!-- <ng-container *igxTemplateOutlet="(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)"></ng-container> -->
         </ng-template>

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

@@ -2022,7 +2022,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     }
 
     protected getPivotRowHeaderContentWidth(headerGroup: IgxPivotRowHeaderGroupComponent) {
-        const headerSizes = this.getHeaderCellWidth(headerGroup.header.refInstance.nativeElement);
+        const headerSizes = this.getHeaderCellWidth(headerGroup.nativeElement);
         return headerSizes.width + headerSizes.padding;
     }
 

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html

@@ -254,8 +254,8 @@
                             <igx-pivot-row-header-group #rowDimensionHeaders
                                 [ngClass]="dimCol.headerGroupClasses"
                                 [ngStyle]="dimCol.headerGroupStyles | igxHeaderGroupStyle:dimCol:grid.pipeTrigger"
-                                [style.min-width]="grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])"
-                                [style.flex-basis]="grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])"
+                                [style.width.px]="grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])"
+                                [style.flex-basis.px]="grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])"
                                 [column]="dimCol"
                                 [rootDimension]="grid.visibleRowDimensions[colIndex]"
                                 [dimWidth]="grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])"

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.html

@@ -28,7 +28,6 @@
         (keydown)="grid.navigation.headerNavigation($event)"
         [style.min-width]="getHeaderWidthFromDimension()"
         [style.width]="getHeaderWidthFromDimension()"
-        [style.flex-basis]="getHeaderWidthFromDimension()"
     >
     </igx-pivot-row-dimension-header>
     @if (!column.columnGroup && column.resizable) {

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

@@ -159,9 +159,6 @@ export class IgxPivotRowHeaderGroupComponent extends IgxGridHeaderGroupComponent
     }
 
     protected getHeaderWidthFromDimension() {
-        if (this.grid.hasHorizontalLayout) {
-            return this.dimWidth === -1 ? 'fit-content' : this.width;
-        }
-        return this.grid.rowDimensionWidth(this.parent.rootDimension);
+        return this.grid.hasHorizontalLayout && this.dimWidth === -1 ? 'fit-content' : null;
     }
 }