fix(platform): disable scrolling during table row drag and drop (#13343)

* fix(platform): disable scrolling during table row drag and drop

* fix(platform): call function to re-enable dragging after drop

---------

Co-authored-by: deno <[email protected]>

Author: mikerodonnell89

libs/cdk/src/lib/utils/directives/focusable-grid/focusable-grid.directive.ts

@@ -62,6 +62,9 @@ export class FocusableGridDirective implements AfterViewInit {
     @ContentChildren(FDK_FOCUSABLE_LIST_DIRECTIVE, { descendants: true })
     private readonly _focusableLists: QueryList<FocusableListDirective>;
 
+    /** @hidden */
+    _preventKeydown = false;
+
     /** @hidden */
     constructor(private readonly _destroy$: DestroyedService) {}
 
@@ -129,7 +132,10 @@ export class FocusableGridDirective implements AfterViewInit {
 
     /** @hidden */
     _onKeydown(event: KeyboardEvent, list: FocusableListDirective, activeItemIndex: Nullable<number>): void {
-        if (!KeyUtil.isKeyCode(event, [UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, PAGE_DOWN, PAGE_UP])) {
+        if (
+            !KeyUtil.isKeyCode(event, [UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, PAGE_DOWN, PAGE_UP]) ||
+            this._preventKeydown
+        ) {
             return;
         }
 

libs/platform/src/lib/table-helpers/directives/table-draggable.directive.ts

@@ -8,14 +8,16 @@ import {
     inject,
     Input,
     NgZone,
+    OnDestroy,
     Output
 } from '@angular/core';
 import {
     DragoverPredicate,
     DropPredicate,
     FdDndDropEventMode,
     FdDndDropType,
-    FdDropEvent
+    FdDropEvent,
+    KeyUtil
 } from '@fundamental-ngx/cdk/utils';
 import { take } from 'rxjs/operators';
 import { FDP_TABLE_DRAGGABLE_DIRECTIVE } from '../constants';
@@ -24,6 +26,17 @@ import { findRowChildren, getRowParents } from '../helpers';
 import { TableRow, TableRowsRearrangeEvent, UpdatedDndRowsPosition } from '../models';
 import { TableDraggable } from '../models/directives';
 import { Table } from '../table';
+import {
+    DOWN_ARROW,
+    END,
+    HOME,
+    LEFT_ARROW,
+    PAGE_DOWN,
+    PAGE_UP,
+    RIGHT_ARROW,
+    SPACE,
+    UP_ARROW
+} from '@angular/cdk/keycodes';
 
 @Directive({
     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -36,7 +49,7 @@ import { Table } from '../table';
         }
     ]
 })
-export class TableDraggableDirective<T = any> extends TableDraggable<T> {
+export class TableDraggableDirective<T = any> extends TableDraggable<T> implements OnDestroy {
     /** Whether to allow for row reordering on tree tables via drag and drop. */
     @Input()
     enableRowReordering = true;
@@ -86,6 +99,11 @@ export class TableDraggableDirective<T = any> extends TableDraggable<T> {
     /** @hidden */
     dragDropInProgress = false;
 
+    /** @hidden */
+    ngOnDestroy(): void {
+        this._setDragInProgress(false);
+    }
+
     /** Sets table reference. */
     setTable(table: Table): void {
         this._table = table;
@@ -95,7 +113,7 @@ export class TableDraggableDirective<T = any> extends TableDraggable<T> {
      * Initiates drag&drop sequence.
      */
     dragDropStart(): void {
-        this.dragDropInProgress = true;
+        this._setDragInProgress(true);
     }
 
     /** Method called when dnd performed with the keyboard. */
@@ -126,15 +144,17 @@ export class TableDraggableDirective<T = any> extends TableDraggable<T> {
     dropCancelled(): void {
         /** After timeout to make click event handled first */
         this._ngZone.runOutsideAngular(() => {
-            setTimeout(() => (this.dragDropInProgress = false));
+            setTimeout(() => {
+                this._setDragInProgress(false);
+            });
         });
     }
 
     /** Method called when dragged item being dropped. */
     dragDropItemDrop(event: FdDropEvent<TableRow>): void {
         /** After timeout to make click event handled first */
         this._ngZone.runOutsideAngular(() => {
-            setTimeout(() => (this.dragDropInProgress = false));
+            setTimeout(() => this._setDragInProgress(false));
         });
 
         this._onZoneFree(() => {
@@ -193,6 +213,12 @@ export class TableDraggableDirective<T = any> extends TableDraggable<T> {
         );
     }
 
+    /** @hidden */
+    private _setDragInProgress(dragging: boolean): void {
+        this.dragDropInProgress = dragging;
+        dragging ? this._blockScrolling() : this._enableScrolling();
+    }
+
     /** @hidden */
     private _isDroppedInsideItself(dropRow: TableRow, dragRow: TableRow): boolean {
         const dropRowParents = getRowParents(dropRow);
@@ -311,4 +337,38 @@ export class TableDraggableDirective<T = any> extends TableDraggable<T> {
             callback();
         });
     }
+
+    /** @hidden */
+    private _blockScrolling(): void {
+        this._table._focusableGrid._preventKeydown = true;
+        this._table.tableContainer.nativeElement.addEventListener('DOMMouseScroll', preventDefault, false);
+        this._table.tableContainer.nativeElement.addEventListener('wheel', preventDefault, { passive: false });
+        this._table.tableContainer.nativeElement.addEventListener('mousewheel', preventDefault, { passive: false });
+        this._table.tableContainer.nativeElement.addEventListener('touchmove', preventDefault, { passive: false });
+        this._table.tableContainer.nativeElement.addEventListener('keydown', preventDefaultForScrollKeys, false);
+    }
+
+    /** @hidden */
+    private _enableScrolling(): void {
+        this._table._focusableGrid._preventKeydown = false;
+        this._table.tableContainer.nativeElement.removeEventListener('DOMMouseScroll', preventDefault, false);
+        this._table.tableContainer.nativeElement.removeEventListener('wheel', preventDefault);
+        this._table.tableContainer.nativeElement.removeEventListener('mousewheel', preventDefault);
+        this._table.tableContainer.nativeElement.removeEventListener('touchmove', preventDefault);
+        this._table.tableContainer.nativeElement.removeEventListener('keydown', preventDefaultForScrollKeys, false);
+    }
+}
+
+function preventDefault(event: Event): void {
+    event.preventDefault();
+}
+
+function preventDefaultForScrollKeys(event: KeyboardEvent): boolean | undefined {
+    if (
+        !event.altKey &&
+        KeyUtil.isKeyCode(event, [LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW, SPACE, PAGE_DOWN, PAGE_UP, END, HOME])
+    ) {
+        preventDefault(event);
+        return false;
+    }
 }

libs/platform/src/lib/table-helpers/directives/table-virtual-scroll.directive.ts

@@ -3,8 +3,8 @@ import { DestroyedService, FocusableItemPosition, KeyUtil } from '@fundamental-n
 import { ContentDensityMode } from '@fundamental-ngx/core/content-density';
 import { BehaviorSubject, filter, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { FDP_TABLE_VIRTUAL_SCROLL_DIRECTIVE, ROW_HEIGHT } from '../constants';
-import { TableVirtualScroll } from '../models';
+import { FDP_TABLE_DRAGGABLE_DIRECTIVE, FDP_TABLE_VIRTUAL_SCROLL_DIRECTIVE, ROW_HEIGHT } from '../constants';
+import { TableDraggable, TableVirtualScroll } from '../models';
 import { TableScrollDispatcherService } from '../services/table-scroll-dispatcher.service';
 import { Table } from '../table';
 import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
@@ -77,6 +77,11 @@ export class TableVirtualScrollDirective extends TableVirtualScroll implements O
     /** @hidden */
     private readonly _tableScrollDispatcher = inject(TableScrollDispatcherService);
 
+    /** @hidden */
+    private readonly _dndTableDirective = inject<TableDraggable>(FDP_TABLE_DRAGGABLE_DIRECTIVE, {
+        optional: true
+    });
+
     /** @hidden */
     private readonly _tableRowService = inject(TableRowService);
 
@@ -174,7 +179,7 @@ export class TableVirtualScrollDirective extends TableVirtualScroll implements O
                     this._focusedCell = event;
                 });
             }
-            if (!this.virtualScroll || !this.bodyHeight) {
+            if (!this.virtualScroll || !this.bodyHeight || this._dndTableDirective?.dragDropInProgress) {
                 return;
             }
 

libs/platform/src/lib/table/table.component.html

@@ -24,6 +24,7 @@
     <div
         class="fdp-table__body fd-scrollbar"
         [class.fdp-table__body--virtual-scroll]="!!_virtualScrollDirective?.virtualScroll"
+        [class.fdp-table__body--disable-scroll]="!!_dndTableDirective?.dragDropInProgress"
         [style.position]="
             !!_virtualScrollDirective?.virtualScroll && !_virtualScrollDirective?.scrollWholeRows
                 ? 'relative'

libs/platform/src/lib/table/table.component.scss

@@ -577,3 +577,7 @@ fdk-dynamic-portal {
 .fd-table__intersection-spy {
     position: relative;
 }
+
+.fdp-table__body--disable-scroll {
+    overflow: hidden !important;
+}