fix(grid-pinning): remove hide call in scrollToRow - 21.1.x (#16996)

Author: IMinchev64

projects/igniteui-angular/core/src/grid-column-actions/token.ts

@@ -7,6 +7,7 @@ export abstract class IgxActionStripToken {
     public abstract cdr: ChangeDetectorRef
     public abstract context: any;
     public abstract menuOverlaySettings: OverlaySettings;
+    public abstract actionButtons: QueryList<IgxActionStripActionsToken>;
     public abstract get hideOnRowLeave(): boolean;
 
     public abstract show(context?: any): void;

projects/igniteui-angular/grids/core/src/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/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 {

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

@@ -108,7 +108,7 @@ import { IgxGridRowComponent } from './grid-row.component';
 import { IgxGridGroupByAreaComponent } from './grouping/grid-group-by-area.component';
 import { IgxPaginatorToken, type IgxPaginatorComponent } from 'igniteui-angular/paginator';
 import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
-import { CharSeparatedValueData, DropPosition, FilterMode, getUUID, GridCellMergeMode, GridKeydownTargetType, GridPagingMode, GridSelectionMode, GridSelectionRange, GridServiceType, GridSummaryPosition, GridType, GridValidationTrigger, IActiveNode, IActiveNodeChangeEventArgs, ICellPosition, IClipboardOptions, IColumnMovingEndEventArgs, IColumnMovingEventArgs, IColumnMovingStartEventArgs, IColumnResizeEventArgs, IColumnsAutoGeneratedEventArgs, IColumnSelectionEventArgs, IColumnVisibilityChangedEventArgs, IColumnVisibilityChangingEventArgs, IFilteringEventArgs, IGridCellEventArgs, IGridClipboardEvent, IGridContextMenuEventArgs, IGridEditDoneEventArgs, IGridEditEventArgs, IGridFormGroupCreatedEventArgs, IGridKeydownEventArgs, IGridRowEventArgs, IGridScrollEventArgs, IGridToolbarExportEventArgs, IGridValidationStatusEventArgs, IGX_GRID_SERVICE_BASE, IgxAdvancedFilteringDialogComponent, IgxCell, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnResizingService, IgxDragIndicatorIconDirective, IgxEditRow, IgxExcelStyleHeaderIconDirective, IgxExcelStyleLoadingValuesTemplateDirective, IgxFilteringService, IgxGridBodyDirective, IgxGridCellComponent, IgxGridColumnResizerComponent, IgxGridEmptyTemplateContext, IgxGridEmptyTemplateDirective, IgxGridExcelStyleFilteringComponent, IgxGridFilteringCellComponent, IgxGridFilteringRowComponent, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridHeaderTemplateContext, IgxGridLoadingTemplateDirective, IgxGridNavigationService, IgxGridRowDragGhostContext, IgxGridRowEditActionsTemplateContext, IgxGridRowEditTemplateContext, IgxGridRowEditTextTemplateContext, IgxGridRowTemplateContext, IgxGridSelectionService, IgxGridSummaryService, IgxGridTemplateContext, IgxGridToolbarComponent, IgxGridTransaction, IgxGridValidationService, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeadSelectorDirective, IgxHeadSelectorTemplateContext, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowDirective, IgxRowDragGhostDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowSelectorDirective, IgxRowSelectorTemplateContext, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxSummaryRowComponent, IgxToolbarToken, IPinColumnCancellableEventArgs, IPinColumnEventArgs, IPinningConfig, IPinRowEventArgs, IRowDataCancelableEventArgs, IRowDataEventArgs, IRowDragEndEventArgs, IRowDragStartEventArgs, IRowSelectionEventArgs, IRowToggleEventArgs, ISearchInfo, ISizeInfo, ISortingEventArgs, RowEditPositionStrategy, RowPinningPosition, RowType, WatchChanges } from 'igniteui-angular/grids/core';
+import { CharSeparatedValueData, DropPosition, FilterMode, getUUID, GridCellMergeMode, GridKeydownTargetType, GridPagingMode, GridSelectionMode, GridSelectionRange, GridServiceType, GridSummaryPosition, GridType, GridValidationTrigger, IActiveNode, IActiveNodeChangeEventArgs, ICellPosition, IClipboardOptions, IColumnMovingEndEventArgs, IColumnMovingEventArgs, IColumnMovingStartEventArgs, IColumnResizeEventArgs, IColumnsAutoGeneratedEventArgs, IColumnSelectionEventArgs, IColumnVisibilityChangedEventArgs, IColumnVisibilityChangingEventArgs, IFilteringEventArgs, IGridCellEventArgs, IGridClipboardEvent, IGridContextMenuEventArgs, IGridEditDoneEventArgs, IGridEditEventArgs, IGridFormGroupCreatedEventArgs, IGridKeydownEventArgs, IGridRowEventArgs, IGridScrollEventArgs, IGridToolbarExportEventArgs, IGridValidationStatusEventArgs, IGX_GRID_SERVICE_BASE, IgxAdvancedFilteringDialogComponent, IgxCell, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnResizingService, IgxDragIndicatorIconDirective, IgxEditRow, IgxExcelStyleHeaderIconDirective, IgxExcelStyleLoadingValuesTemplateDirective, IgxFilteringService, IgxGridBodyDirective, IgxGridCellComponent, IgxGridColumnResizerComponent, IgxGridEmptyTemplateContext, IgxGridEmptyTemplateDirective, IgxGridExcelStyleFilteringComponent, IgxGridFilteringCellComponent, IgxGridFilteringRowComponent, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridHeaderTemplateContext, IgxGridLoadingTemplateDirective, IgxGridNavigationService, IgxGridPinningActionsComponent, IgxGridRowDragGhostContext, IgxGridRowEditActionsTemplateContext, IgxGridRowEditTemplateContext, IgxGridRowEditTextTemplateContext, IgxGridRowTemplateContext, IgxGridSelectionService, IgxGridSummaryService, IgxGridTemplateContext, IgxGridToolbarComponent, IgxGridTransaction, IgxGridValidationService, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeadSelectorDirective, IgxHeadSelectorTemplateContext, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowDirective, IgxRowDragGhostDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowSelectorDirective, IgxRowSelectorTemplateContext, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxSummaryRowComponent, IgxToolbarToken, IPinColumnCancellableEventArgs, IPinColumnEventArgs, IPinningConfig, IPinRowEventArgs, IRowDataCancelableEventArgs, IRowDataEventArgs, IRowDragEndEventArgs, IRowDragStartEventArgs, IRowSelectionEventArgs, IRowToggleEventArgs, ISearchInfo, ISizeInfo, ISortingEventArgs, RowEditPositionStrategy, RowPinningPosition, RowType, WatchChanges } from 'igniteui-angular/grids/core';
 import { getCurrentI18n, getNumberFormatter, IResourceChangeEventArgs,  } from 'igniteui-i18n-core';
 import { I18N_FORMATTER } from 'igniteui-angular/core';
 
@@ -7800,9 +7800,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',
@@ -7812,6 +7821,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);