From 5a697434ade7792ed74fcc16250b1aef72b15543 Mon Sep 17 00:00:00 2001 From: igdmdimitrov Date: Mon, 24 Aug 2026 15:57:33 +0300 Subject: [PATCH 1/5] fix(drag-drop): disable drag on secondary pointer button --- .../drag-drop/drag-drop.directive.ts | 5 +++ .../directives/drag-drop/drag-drop.spec.ts | 35 +++++++++++++++++++ 2 files changed, 40 insertions(+) diff --git a/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts b/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts index c6b8de2a552..f855de6d2eb 100644 --- a/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts @@ -931,6 +931,11 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { * @param event PointerDown event captured */ public onPointerDown(event) { + // Start drag only with the primary mouse button. + if ((this.pointerEventsEnabled || !this.touchEventsEnabled) && event.button !== 0) { + return; + } + const ignoredElement = this.dragIgnoredElems.find(elem => elem.element.nativeElement === event.target); if (ignoredElement) { return; diff --git a/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.spec.ts b/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.spec.ts index 35290451d67..e491a8f6283 100644 --- a/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.spec.ts +++ b/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.spec.ts @@ -2003,6 +2003,41 @@ describe('igxDrag touch, mouse, pointerLost and shadow root coverage', () => { await wait(); }); + it('should not initiate drag on secondary pointer button', async () => { + const firstDrag = fix.componentInstance.dragElems.first; + const firstElement = firstDrag.element.nativeElement; + const startingX = (dragDirsRects[0].left + dragDirsRects[0].right) / 2; + const startingY = (dragDirsRects[0].top + dragDirsRects[0].bottom) / 2; + + spyOn(firstDrag.dragStart, 'emit'); + spyOn(firstDrag.dragClick, 'emit'); + + const pointerDown = new PointerEvent('pointerdown', { + view: window, + bubbles: true, + cancelable: true, + pointerId: 1, + button: 2 + }); + Object.defineProperty(pointerDown, 'pageX', { value: startingX, enumerable: true }); + Object.defineProperty(pointerDown, 'pageY', { value: startingY, enumerable: true }); + firstElement.dispatchEvent(pointerDown); + fix.detectChanges(); + await wait(); + + UIInteractions.simulatePointerEvent('pointermove', firstElement, startingX + 20, startingY + 20); + fix.detectChanges(); + await wait(100); + + UIInteractions.simulatePointerEvent('pointerup', firstElement, startingX + 20, startingY + 20); + fix.detectChanges(); + await wait(); + + expect(firstDrag.dragStart.emit).not.toHaveBeenCalled(); + expect(firstDrag.dragClick.emit).not.toHaveBeenCalled(); + expect(firstDrag.ghostElement).not.toBeDefined(); + }); + it('should call onPointerLost early return when _clicked is false', async () => { const firstDrag = fix.componentInstance.dragElems.first; From d51932c2d7f58298f3ac93c7e6466f7146fcd05f Mon Sep 17 00:00:00 2001 From: igdmdimitrov <49060557+igdmdimitrov@users.noreply.github.com> Date: Mon, 24 Aug 2026 16:11:00 +0300 Subject: [PATCH 2/5] update comment Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- .../src/directives/drag-drop/drag-drop.directive.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts b/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts index f855de6d2eb..76a84e0bf4b 100644 --- a/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts @@ -931,9 +931,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { * @param event PointerDown event captured */ public onPointerDown(event) { - // Start drag only with the primary mouse button. - if ((this.pointerEventsEnabled || !this.touchEventsEnabled) && event.button !== 0) { - return; + // Start drag only with the primary pointer button. } const ignoredElement = this.dragIgnoredElems.find(elem => elem.element.nativeElement === event.target); From b7cbf8b5c95eb6d4150a3147641d9138f6e6d96b Mon Sep 17 00:00:00 2001 From: igdmdimitrov Date: Mon, 24 Aug 2026 16:28:36 +0300 Subject: [PATCH 3/5] chore(*): bring back deleted code --- .../directives/src/directives/drag-drop/drag-drop.directive.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts b/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts index 76a84e0bf4b..107e3330b19 100644 --- a/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts @@ -932,6 +932,8 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { */ public onPointerDown(event) { // Start drag only with the primary pointer button. + if ((this.pointerEventsEnabled || !this.touchEventsEnabled) && event.button !== 0) { + return; } const ignoredElement = this.dragIgnoredElems.find(elem => elem.element.nativeElement === event.target); From a3a7f0178184df4fb935baaba84f73312ec31210 Mon Sep 17 00:00:00 2001 From: igdmdimitrov Date: Mon, 24 Aug 2026 17:31:04 +0300 Subject: [PATCH 4/5] chore(*): add additional check if button is undefined --- .../directives/src/directives/drag-drop/drag-drop.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts b/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts index 107e3330b19..b7d0a050039 100644 --- a/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts @@ -932,7 +932,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { */ public onPointerDown(event) { // Start drag only with the primary pointer button. - if ((this.pointerEventsEnabled || !this.touchEventsEnabled) && event.button !== 0) { + if ((this.pointerEventsEnabled || !this.touchEventsEnabled) && event.button !== undefined && event.button !== 0) { return; } From c0ca521f532a06fcd8b91a31ae94b547528a8df2 Mon Sep 17 00:00:00 2001 From: igdmdimitrov Date: Tue, 25 Aug 2026 15:10:37 +0300 Subject: [PATCH 5/5] chore(*): update pointer check --- .../directives/src/directives/drag-drop/drag-drop.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts b/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts index 847704d948a..8e87fee6a45 100644 --- a/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts @@ -933,7 +933,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { */ public onPointerDown(event: PointerEvent | TouchEvent | MouseEvent) { // Start drag only with the primary pointer button. - if ((this.pointerEventsEnabled || !this.touchEventsEnabled) && event.button !== undefined && event.button !== 0) { + if ((this.pointerEventsEnabled || !this.touchEventsEnabled) && 'button' in event && event.button !== 0) { return; }