enhancement(moving): Move pointerDown and pointerMove logic to avoid needing additional custom attributes. (#12966)

* enhancement(moving): Move pointerDown and pointerMove logic to avoid needing additional custom attributes. Fix drag directive eating up event for children.

* enhancement(moving): Ensure on pointer down group drop area is show and headers cannot be dragged from sorting/filtering icons.

* fix(drag): Ensure that target telement is present in dom when setting pointer capture.

* chore(*): Cleanup imports.

* enhancement(moving): Retain `draggable` attribute as an option and add changelog.

* chore(*): Fix typo in changelog.

* fix(moving): Revert back uses of draggable attributes to be sure all is working as expected.

* chore(*): Update changelog with grouping behavior change.

* chore(*): Move pointerdown handling in corresponding methods.

---------

Co-authored-by: Svetoslav Krastev <[email protected]>
Co-authored-by: Deyan Kamburov <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -7,6 +7,9 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `IgxStepper`:
     - **Breaking Change** The `IgxStepSubTitleDirective` has been renamed to `IgxStepSubtitleDirective`. Automatic migrations are available and will be applied on `ng update`.
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - The `draggable` attribute is no longer required to be set on interactable elements, if a column header is templated and the Column Moving is enabled in order for handlers for any event to be triggered. Now `draggable='false'` can be used as an addition if the user shouldn't be able to drag a column by that element, but even if omitted `click` events for example will trigger now.
+    - **Behavioral Change** When there are already grouped columns, the group drop area now shows after dragging of a column starts and not when only click actions are performed.
 
 ## 16.0.0
 

projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts

@@ -915,19 +915,21 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
             return;
         }
 
-        this._clicked = true;
-        this._pointerDownId = event.pointerId;
-
         // Set pointer capture so we detect pointermove even if mouse is out of bounds until ghostElement is created.
         const handleFound = this.dragHandles.find(handle => handle.element.nativeElement === event.target);
-        const targetElement = handleFound ? handleFound.element.nativeElement : this.element.nativeElement;
-        if (this.pointerEventsEnabled) {
+        const targetElement = handleFound ? handleFound.element.nativeElement : event.target || this.element.nativeElement;
+        const targetValid = document.body.contains(targetElement);
+        if (this.pointerEventsEnabled && targetValid) {
+            this._pointerDownId = event.pointerId;
             targetElement.setPointerCapture(this._pointerDownId);
-        } else {
+        } else if (targetValid) {
             targetElement.focus();
             event.preventDefault();
+        } else {
+            return;
         }
 
+        this._clicked = true;
         if (this.pointerEventsEnabled || !this.touchEventsEnabled) {
             // Check first for pointer events or non touch, because we can have pointer events and touch events at once.
             this._startX = event.pageX;

projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts

@@ -417,10 +417,12 @@ describe('IgxGrid - Column Moving #grid', () => {
             await wait();
 
             // step 2 - verify columnMovingStart is fired correctly
-            expect(fixture.componentInstance.countStart).toEqual(1);
-            expect(fixture.componentInstance.source).toEqual(grid.columns[0]);
             UIInteractions.simulatePointerEvent('pointermove', header, 156, 71);
             await wait(50);
+
+            expect(fixture.componentInstance.countStart).toEqual(1);
+            expect(fixture.componentInstance.source).toEqual(grid.columns[0]);
+
             UIInteractions.simulatePointerEvent('pointermove', header, 330, 75);
             await wait(50);
 
@@ -447,12 +449,13 @@ describe('IgxGrid - Column Moving #grid', () => {
             UIInteractions.simulatePointerEvent('pointerdown', header, 150, 65);
             await wait();
 
+            UIInteractions.simulatePointerEvent('pointermove', header, 156, 71);
+            await wait();
+
             if (fixture.componentInstance.source.field === 'ID') {
                 fixture.componentInstance.cancel = true;
             }
 
-            UIInteractions.simulatePointerEvent('pointermove', header, 156, 71);
-            await wait();
             UIInteractions.simulatePointerEvent('pointermove', header, 330, 75);
             await wait(50);
             UIInteractions.simulatePointerEvent('pointerup', header, 330, 75);

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html

@@ -28,8 +28,7 @@
 </ng-template>
 
 <ng-template #defaultCollapseIndicator>
-    <igx-icon [attr.draggable]="false" >
-            {{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>
+    <igx-icon>{{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>
 </ng-template>
 
 <ng-container *ngIf="!grid.hasColumnLayouts && column.columnGroup">
@@ -56,7 +55,7 @@
         (pointerleave)="onPointerLeave()"
         >
         <ng-container *ngIf="column.collapsible">
-            <div class="igx-grid-th__expander" (click)="toggleExpandState($event)">
+            <div class="igx-grid-th__expander" (pointerdown)="onPointerDownIndicator($event)" (click)="toggleExpandState($event)">
                 <ng-container
                     *ngTemplateOutlet="column.collapsibleIndicatorTemplate ? column.collapsibleIndicatorTemplate : defaultCollapseIndicator; context: {$implicit: column, column: column}">
                 </ng-container>

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts

@@ -289,6 +289,14 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
         }
     }
 
+    /**
+     * @hidden @internal
+     */
+    public onPointerDownIndicator(event) {
+        // Stop propagation of pointer events to now allow column dragging using the header indicators.
+        event.stopPropagation();
+    }
+
     /**
      * @hidden @internal
      */

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html

@@ -20,13 +20,12 @@
         <ng-container *ngIf="column.sortable && !disabled">
             <div class="sort-icon"
                 [attr.data-sortIndex]="(grid.sortingOptions.mode === 'single' && grid.sortingExpressions.length <=1) ? null : column.field | sortingIndex:grid.sortingExpressions"
-                [attr.draggable]="false" (click)="onSortingIconClick($event)" (pointerdown)="$event.stopPropagation()">
+                (pointerdown)="onPointerDownIndicator($event)" (click)="onSortingIconClick($event)">
                 <ng-container *ngTemplateOutlet="sortIconTemplate; context: { $implicit:  this }"></ng-container>
             </div>
         </ng-container>
         <ng-container *ngIf="grid.allowFiltering && column.filterable && grid.filterMode === 'excelStyleFilter'">
-            <div [ngClass]="filterIconClassName" (click)="onFilteringIconClick($event)"
-                (pointerdown)="$event.stopPropagation()">
+            <div [ngClass]="filterIconClassName" (pointerdown)="onPointerDownIndicator($event)" (click)="onFilteringIconClick($event)" >
                 <ng-container *ngTemplateOutlet="esfIconTemplate; context: { $implicit:  this }"></ng-container>
             </div>
         </ng-container>

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts

@@ -247,22 +247,41 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
         this.column.applySelectableClass = false;
     }
 
+    /**
+     * @hidden @internal
+     */
     public ngDoCheck() {
         this.getSortDirection();
         this.cdr.markForCheck();
     }
 
+    /**
+     * @hidden @internal
+     */
     public ngOnDestroy(): void {
         this._destroy$.next(true);
         this._destroy$.complete();
     }
 
+    /**
+     * @hidden @internal
+     */
+    public onPointerDownIndicator(event) {
+        // Stop propagation of pointer events to now allow column dragging using the header indicators.
+        event.stopPropagation();
+    }
 
+    /**
+     * @hidden @internal
+     */
     public onFilteringIconClick(event) {
         event.stopPropagation();
         this.grid.filteringService.toggleFilterDropdown(this.nativeElement, this.column);
     }
 
+    /**
+     * @hidden @internal
+     */
     public onSortingIconClick(event) {
         event.stopPropagation();
         this.triggerSort();

projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts

@@ -42,6 +42,7 @@ export class IgxColumnMovingDragDirective extends IgxDragDirective implements On
         _platformUtil: PlatformUtil,
     ) {
         super(cdr, element, viewContainer, zone, renderer, _platformUtil);
+        this.ghostClass = this._ghostClass;
     }
 
     public override ngOnDestroy() {
@@ -59,32 +60,28 @@ export class IgxColumnMovingDragDirective extends IgxDragDirective implements On
             return;
         }
 
-        event.preventDefault();
-        event.stopPropagation();
-
-        this._removeOnDestroy = false;
-        this.cms.column = this.column;
-        this.ghostClass = this._ghostClass;
-
         super.onPointerDown(event);
-        this.column.grid.cdr.detectChanges();
-
-        const args = {
-            source: this.column
-        };
-        this.column.grid.columnMovingStart.emit(args);
-
-        this.subscription$ = fromEvent(this.column.grid.document.defaultView, 'keydown').subscribe((ev: KeyboardEvent) => {
-            if (ev.key === this.platformUtil.KEYMAP.ESCAPE) {
-                this.onEscape(ev);
-            }
-        });
     }
 
     public override onPointerMove(event: Event) {
-        event.preventDefault();
-        super.onPointerMove(event);
+        if (this._clicked && !this._dragStarted) {
+            this._removeOnDestroy = false;
+            this.cms.column = this.column;
+            this.column.grid.cdr.detectChanges();
+
+            const movingStartArgs = {
+                source: this.column
+            };
+            this.column.grid.columnMovingStart.emit(movingStartArgs);
+
+            this.subscription$ = fromEvent(this.column.grid.document.defaultView, 'keydown').subscribe((ev: KeyboardEvent) => {
+                if (ev.key === this.platformUtil.KEYMAP.ESCAPE) {
+                    this.onEscape(ev);
+                }
+            });
+        }
 
+        super.onPointerMove(event);
         if (this._dragStarted && this.ghostElement && !this.cms.column) {
             this.cms.column = this.column;
             this.column.grid.cdr.detectChanges();

projects/igniteui-angular/src/lib/grids/moving/moving.drop.directive.ts

@@ -158,7 +158,8 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On
     public override onDragDrop(event) {
         event.preventDefault();
         const drag = event.detail.owner;
-        if (!(drag instanceof IgxColumnMovingDragDirective)) {
+        if (this.cms.cancelDrop || !(drag instanceof IgxColumnMovingDragDirective)) {
+            this.cms.cancelDrop = false;
             return;
         }
 

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html

@@ -13,16 +13,15 @@
 
 <ng-template #headerTemplate let-column>
     <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{getLevel()}}'>
-        <igx-icon [attr.draggable]=" false" (click)="toggleRowDimension($event)">
+        <igx-icon [attr.draggable]="false" (click)="toggleRowDimension($event)">
             {{ getExpandState() ? 'expand_more' : 'chevron_right'}}</igx-icon>
         {{column.header}}
     </div>
 </ng-template>
 
 <ng-template #headerDefaultTemplate let-column>
-
     <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{getLevel()}}'>
-        <igx-icon style='flex-shrink: 0;' [attr.draggable]=" false">
+        <igx-icon style='flex-shrink: 0;' [attr.draggable]="false">
         </igx-icon>
         {{column.header}}
     </div>