diff --git a/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.spec.ts b/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.spec.ts index a29a9c8121d..a9f8f23a856 100644 --- a/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.spec.ts +++ b/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.spec.ts @@ -71,6 +71,52 @@ describe('igxGridPinningActions #grid ', () => { const secondToLastVisible = grid.rowList.toArray()[grid.rowList.length - 2]; expect(secondToLastVisible.key).toEqual('FAMIA'); }); + + it('should keep action strip visible and preserve context when jumping from hovered pinned row', async () => { + grid.pinRow('FAMIA'); + fixture.detectChanges(); + + const pinnedRow = grid.pinnedRows[0]; + actionStrip.show(pinnedRow); + fixture.detectChanges(); + + const initialContext = actionStrip.context; + const contextElement = initialContext.element.nativeElement as HTMLElement; + spyOn(contextElement, 'matches').and.callFake((selector: string) => + selector === ':hover' ? true : HTMLElement.prototype.matches.call(contextElement, selector) + ); + + const pinningButtons = fixture.debugElement.queryAll(By.css(`igx-grid-pinning-actions button`)); + const jumpButton = pinningButtons[0]; + jumpButton.triggerEventHandler('click', new Event('click')); + await wait(); + fixture.detectChanges(); + await wait(DEBOUNCETIME); + fixture.detectChanges(); + + expect(actionStrip.hidden).toBeFalse(); + expect(actionStrip.context).toBe(initialContext); + }); + + it('should not hide action strip in base mode when scrollToRow is invoked', () => { + grid.pinRow('FAMIA'); + fixture.detectChanges(); + + const pinnedRow = grid.pinnedRows[0]; + actionStrip.show(pinnedRow); + fixture.detectChanges(); + + const pinningActions = fixture.debugElement.query(By.directive(IgxGridPinningActionsComponent)) + .componentInstance as IgxGridPinningActionsComponent; + spyOn(grid, 'scrollTo'); + + pinningActions.scrollToRow(null); + fixture.detectChanges(); + + expect((grid as any).scrollTo).toHaveBeenCalledWith(pinnedRow.data, 0); + expect(actionStrip.hidden).toBeFalse(); + expect(actionStrip.context).toBe(pinnedRow); + }); }); describe('Menu ', () => { @@ -94,6 +140,25 @@ describe('igxGridPinningActions #grid ', () => { fixture.detectChanges(); expect(grid.pinnedRows.length).toBe(1); }); + + it('should hide action strip in menu mode when scrollToRow is invoked', () => { + grid.pinRow('FAMIA'); + fixture.detectChanges(); + + const pinnedRow = grid.pinnedRows[0]; + actionStrip.show(pinnedRow); + fixture.detectChanges(); + + const pinningActions = fixture.debugElement.query(By.directive(IgxGridPinningActionsComponent)) + .componentInstance as IgxGridPinningActionsComponent; + spyOn(grid, 'scrollTo'); + + pinningActions.scrollToRow(null); + fixture.detectChanges(); + + expect((grid as any).scrollTo).toHaveBeenCalledWith(pinnedRow.data, 0); + expect(actionStrip.hidden).toBeTrue(); + }); }); }); diff --git a/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.ts b/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.ts index 5ea7dfe006b..9ade780ecb0 100644 --- a/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.ts +++ b/projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.ts @@ -126,7 +126,10 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective const context = this.strip.context; const grid = context.grid; grid.scrollTo(context.data, 0); - this.strip.hide(); + + if (this.asMenuItems) { + this.strip.hide(); + } } private registerSVGIcons(): void { diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index e0eaf8817cb..4c028f901b0 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -7792,9 +7792,18 @@ export abstract class IgxGridBaseDirective implements GridType, this.disableTransitions = false; this.hideOverlays(); - this.actionStrip?.hide(); - if (this.actionStrip) { - this.actionStrip.context = null; + const context = this.actionStrip?.context; + const contextEl = context?.element?.nativeElement as HTMLElement; + const keepActionStrip = + !!context?.pinned && + !!contextEl?.isConnected && + !!contextEl?.matches?.(':hover'); + + if (!keepActionStrip) { + this.actionStrip?.hide(); + if (this.actionStrip) { + this.actionStrip.context = null; + } } const args: IGridScrollEventArgs = { direction: 'vertical',