From 5ac7a0dce5a5496875ba7e3a74af34552fe5565f Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 16 Jun 2025 11:42:00 +0300 Subject: [PATCH 1/9] fix(action-strip): Assign parent to not destroy on DOM move. --- .../igniteui-angular-elements/src/app/custom-strategy.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/projects/igniteui-angular-elements/src/app/custom-strategy.ts b/projects/igniteui-angular-elements/src/app/custom-strategy.ts index 0784e3abf83..4981a53b6bb 100644 --- a/projects/igniteui-angular-elements/src/app/custom-strategy.ts +++ b/projects/igniteui-angular-elements/src/app/custom-strategy.ts @@ -119,6 +119,13 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy { // ngElementStrategy getter is protected and also has initialization logic, though that should be safe at this point if (parent?.ngElementStrategy) { this.angularParent = parent.ngElementStrategy.angularParent; + + // action strip is reused in row island child grid + // assign parent so it's not destroyed on detach/attach. + if (element.tagName.toLocaleLowerCase() === 'igc-action-strip') { + this.angularParent = (parent.ngElementStrategy as any).componentRef; + } + this.parentElement = new WeakRef(parent); let parentComponentRef = await parent?.ngElementStrategy[ComponentRefKey]; parentInjector = parentComponentRef?.injector; From 01683e7f05c1f1209580ec68e25661fd688657d3 Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 16 Jun 2025 12:05:54 +0300 Subject: [PATCH 2/9] chore(*): Move strip handling after parentComponentRef is populated. --- .../src/app/custom-strategy.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular-elements/src/app/custom-strategy.ts b/projects/igniteui-angular-elements/src/app/custom-strategy.ts index 4981a53b6bb..76a49dae49b 100644 --- a/projects/igniteui-angular-elements/src/app/custom-strategy.ts +++ b/projects/igniteui-angular-elements/src/app/custom-strategy.ts @@ -120,12 +120,6 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy { if (parent?.ngElementStrategy) { this.angularParent = parent.ngElementStrategy.angularParent; - // action strip is reused in row island child grid - // assign parent so it's not destroyed on detach/attach. - if (element.tagName.toLocaleLowerCase() === 'igc-action-strip') { - this.angularParent = (parent.ngElementStrategy as any).componentRef; - } - this.parentElement = new WeakRef(parent); let parentComponentRef = await parent?.ngElementStrategy[ComponentRefKey]; parentInjector = parentComponentRef?.injector; @@ -138,6 +132,12 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy { parentComponentRef = await parent?.ngElementStrategy[ComponentRefKey]; parentAnchor = parentComponentRef?.instance.anchor; } + + // action strip is reused for all rows + // assign parent so it's not destroyed on detach/attach. + if (element.tagName.toLocaleLowerCase() === 'igc-action-strip' || configParent.selector === 'igc-action-strip') { + this.angularParent = parentComponentRef; + } } else if ((parent as any)?.__componentRef) { this.angularParent = (parent as any).__componentRef; parentInjector = this.angularParent.injector; From fbd17854bcd22b91507a3a9b3408b2230e0d9569 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 20 Jun 2025 15:02:24 +0300 Subject: [PATCH 3/9] fix(action-strip): Fix timing issues. --- .../igniteui-angular-elements/src/app/custom-strategy.ts | 6 ------ .../src/lib/action-strip/action-strip.component.ts | 3 +++ .../grid-actions/grid-editing-actions.component.ts | 2 +- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular-elements/src/app/custom-strategy.ts b/projects/igniteui-angular-elements/src/app/custom-strategy.ts index 76a49dae49b..a80dd5094f7 100644 --- a/projects/igniteui-angular-elements/src/app/custom-strategy.ts +++ b/projects/igniteui-angular-elements/src/app/custom-strategy.ts @@ -119,7 +119,6 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy { // ngElementStrategy getter is protected and also has initialization logic, though that should be safe at this point if (parent?.ngElementStrategy) { this.angularParent = parent.ngElementStrategy.angularParent; - this.parentElement = new WeakRef(parent); let parentComponentRef = await parent?.ngElementStrategy[ComponentRefKey]; parentInjector = parentComponentRef?.injector; @@ -133,11 +132,6 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy { parentAnchor = parentComponentRef?.instance.anchor; } - // action strip is reused for all rows - // assign parent so it's not destroyed on detach/attach. - if (element.tagName.toLocaleLowerCase() === 'igc-action-strip' || configParent.selector === 'igc-action-strip') { - this.angularParent = parentComponentRef; - } } else if ((parent as any)?.__componentRef) { this.angularParent = (parent as any).__componentRef; parentInjector = this.angularParent.injector; diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts index ff848fa4846..21e63daa469 100644 --- a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts @@ -279,6 +279,9 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten * ``` */ public show(context?: any): void { + if(!this._originalParent) { + this._originalParent = this._viewContainer.element.nativeElement?.parentElement; + } this.hidden = false; if (!context) { return; diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts index e48ec8745f2..0f35205cb54 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts @@ -147,7 +147,7 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective const context = this.strip.context; const grid = context.grid; grid.deleteRow(context.key); - + this.grid.cdr.detectChanges(); this.strip.hide(); } From a8642fd058bf8d5deca34266c0ee13f11696f650 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 9 Oct 2025 16:00:38 +0300 Subject: [PATCH 4/9] fix(igxGridRow): On destroy check for still shown action strip. --- .../src/lib/action-strip/action-strip.component.ts | 3 --- .../grid-actions/grid-editing-actions.component.ts | 1 - projects/igniteui-angular/src/lib/grids/row.directive.ts | 4 ++++ 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts index 21e63daa469..ff848fa4846 100644 --- a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts @@ -279,9 +279,6 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten * ``` */ public show(context?: any): void { - if(!this._originalParent) { - this._originalParent = this._viewContainer.element.nativeElement?.parentElement; - } this.hidden = false; if (!context) { return; diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts index 0f35205cb54..4207450cb45 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts @@ -147,7 +147,6 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective const context = this.strip.context; const grid = context.grid; grid.deleteRow(context.key); - this.grid.cdr.detectChanges(); this.strip.hide(); } diff --git a/projects/igniteui-angular/src/lib/grids/row.directive.ts b/projects/igniteui-angular/src/lib/grids/row.directive.ts index 81a0bced344..4752e1ce936 100644 --- a/projects/igniteui-angular/src/lib/grids/row.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/row.directive.ts @@ -492,6 +492,10 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy { * @internal */ public ngOnDestroy() { + // if action strip is shown here but row is about to be destroyed, hide it. + if (this.grid.actionStrip && this.grid.actionStrip.context === this) { + this.grid.actionStrip.hide(); + } this.destroy$.next(true); this.destroy$.complete(); } From ec11d6d6ac7091b70837fec0863cebeecf1c9f68 Mon Sep 17 00:00:00 2001 From: Damyan Petev Date: Fri, 10 Oct 2025 13:40:49 +0300 Subject: [PATCH 5/9] chore(action-strip,elements): minor new lines formatting --- projects/igniteui-angular-elements/src/app/custom-strategy.ts | 1 - .../action-strip/grid-actions/grid-editing-actions.component.ts | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular-elements/src/app/custom-strategy.ts b/projects/igniteui-angular-elements/src/app/custom-strategy.ts index a80dd5094f7..0784e3abf83 100644 --- a/projects/igniteui-angular-elements/src/app/custom-strategy.ts +++ b/projects/igniteui-angular-elements/src/app/custom-strategy.ts @@ -131,7 +131,6 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy { parentComponentRef = await parent?.ngElementStrategy[ComponentRefKey]; parentAnchor = parentComponentRef?.instance.anchor; } - } else if ((parent as any)?.__componentRef) { this.angularParent = (parent as any).__componentRef; parentInjector = this.angularParent.injector; diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts index 4207450cb45..e48ec8745f2 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts @@ -147,6 +147,7 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective const context = this.strip.context; const grid = context.grid; grid.deleteRow(context.key); + this.strip.hide(); } From 72018413a5a78aaf6fb32eb0d30b4b6c35dd7878 Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 13 Oct 2025 17:57:18 +0300 Subject: [PATCH 6/9] fix(igxGrid): On detach also check for still shown action strip. --- .../igniteui-angular/src/lib/grids/grid-base.directive.ts | 6 ++++++ .../igniteui-angular/src/lib/grids/grid/grid.component.html | 1 + .../hierarchical-grid/hierarchical-grid.component.html | 2 +- .../src/lib/grids/tree-grid/tree-grid.component.html | 1 + 4 files changed, 9 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index fdd88ba2794..7818fbbf012 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -6438,6 +6438,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 */ diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 9631c1bd71a..95887b56f24 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -107,6 +107,7 @@ [igxTemplateOutletContext]="getContext(rowData, rowIndex)" (cachedViewLoaded)="cachedViewLoaded($event)" (viewCreated)="viewCreatedHandler($event)" + (beforeViewDetach)="viewDetachHandler($event)" (viewMoved)="viewMovedHandler($event)"> diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html index 276e89cb377..95659846e36 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html @@ -83,7 +83,7 @@ + (viewMoved)="viewMovedHandler($event)" (cachedViewLoaded)="cachedViewLoaded($event)" (beforeViewDetach)="viewDetachHandler($event)"> diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html index 33c79416332..e43960b4bbb 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html @@ -88,6 +88,7 @@ (dataChanging)="dataRebinding($event)" (dataChanged)="dataRebound($event)"> From f18b2f46fe0ea5e6525c4abea1ffd0a103618d05 Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 13 Oct 2025 18:07:30 +0300 Subject: [PATCH 7/9] chore(*): Add null check. --- projects/igniteui-angular/src/lib/grids/grid-base.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 7818fbbf012..43e842cf87a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -6439,7 +6439,7 @@ export abstract class IgxGridBaseDirective implements GridType, } protected viewDetachHandler(args) { - if (this.actionStrip && args.view.rootNodes.find(x => x === this.actionStrip.context.element.nativeElement)) { + if (this.actionStrip && args.view.rootNodes.find(x => x === this.actionStrip.context?.element.nativeElement)) { this.actionStrip.hide(); } } From 9399e0ba7bb681a5cb656d96e5f6ad3c8e72f5f3 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 23 Oct 2025 11:49:40 +0300 Subject: [PATCH 8/9] chore(*): Add angular tests. --- .../grid-editing-actions.component.spec.ts | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts index 4a86a58fdf4..34750256cd2 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts +++ b/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', () => { From a0e57de2388e7ac8b4d9c17f05d8450c8971dc05 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 23 Oct 2025 12:17:29 +0300 Subject: [PATCH 9/9] chore(*): Add elements test for actionstrip. --- .../src/app/custom-strategy.spec.ts | 65 +++++++++++++++++++ 1 file changed, 65 insertions(+) diff --git a/projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts b/projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts index 1b5b3795f02..6f22a889abf 100644 --- a/projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts +++ b/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 = ` + + + + + `; + 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>('#testGrid'); + const actionStrip = document.querySelector>('#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(); + }); }); });