fix(grid-pinning): remove hide call in scrollToRow - 20.1.x (#16780)

Author: IMinchev64

projects/igniteui-angular-elements/src/analyzer/elements.config.ts

@@ -18,12 +18,12 @@ import { IgxColumnLayoutComponent } from "../../../igniteui-angular/src/lib/grid
 import { IgxGridToolbarExporterComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component";
 import { IgxGridToolbarHidingComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component";
 import { IgxGridToolbarPinningComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component";
-import { IgxRowIslandComponent } from "../../../igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component";
 import { IgxActionStripComponent } from "../../../igniteui-angular/src/lib/action-strip/action-strip.component";
 import { IgxActionStripToken } from "../../../igniteui-angular/src/lib/action-strip/token";
-import { IgxGridEditingActionsComponent } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component";
-import { IgxGridActionsBaseDirective } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive";
 import { IgxGridPinningActionsComponent } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component";
+import { IgxGridActionsBaseDirective } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive";
+import { IgxRowIslandComponent } from "../../../igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component";
+import { IgxGridEditingActionsComponent } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component";
 import { IgxGridStateComponent } from "../lib/state.component";
 
 export const registerComponents = [

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

@@ -71,6 +71,26 @@ describe('igxGridPinningActions #grid ', () => {
             const secondToLastVisible = grid.rowList.toArray()[grid.rowList.length - 2];
             expect(secondToLastVisible.key).toEqual('FAMIA');
         });
+
+        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<any>(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 ', () => {

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

@@ -125,7 +125,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 {

projects/igniteui-angular/src/lib/action-strip/token.ts

@@ -1,10 +1,13 @@
+import { QueryList } from '@angular/core';
 import { OverlaySettings } from '../services/public_api';
+import { IgxGridActionsBaseDirective } from './grid-actions/grid-actions-base.directive';
 
 /* csSuppress */
 /** @hidden @internal */
 export abstract class IgxActionStripToken {
     public abstract context: any;
     public abstract menuOverlaySettings: OverlaySettings;
+    public abstract actionButtons: QueryList<IgxGridActionsBaseDirective>;
     public abstract get hideOnRowLeave(): boolean;
 
     public abstract show(context?: any): void;

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

@@ -186,6 +186,7 @@ import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { isTree, recreateTree, recreateTreeFromFields } from '../data-operations/expressions-tree-util';
 import { getUUID } from './common/random';
 import { DefaultMergeStrategy, IGridMergeStrategy } from '../data-operations/merge-strategy';
+import { IgxGridPinningActionsComponent } from '../action-strip/grid-actions/grid-pinning-actions.component';
 
 interface IMatchInfoCache {
     row: any;
@@ -7838,9 +7839,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 &&
+            !this.hasMenuPinningActions();
+
+        if (!keepActionStrip) {
+            if (this.actionStrip) {
+                this.actionStrip.hide();
+                this.actionStrip.context = null;
+            }
         }
         const args: IGridScrollEventArgs = {
             direction: 'vertical',
@@ -7850,6 +7860,23 @@ export abstract class IgxGridBaseDirective implements GridType,
         this.gridScroll.emit(args);
     }
 
+    protected hasMenuPinningActions(): boolean {
+        const strip = this.actionStrip;
+        const actionButtons = strip?.actionButtons;
+
+        if (!actionButtons?.length) {
+            return false;
+        }
+
+        return actionButtons
+            .toArray()
+            .some(
+                (button) =>
+                    button instanceof IgxGridPinningActionsComponent &&
+                    button.asMenuItems
+            );
+    }
+
     protected horizontalScrollHandler(event) {
         const scrollLeft = event.target.scrollLeft;
         this.headerContainer.onHScroll(scrollLeft);