From 3e83fb6bca46325106dfcc3e4fc2ed037a9a42a3 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Fri, 2 Jun 2023 14:49:26 -0400 Subject: [PATCH 1/3] fix(material/slider): handle contextmenu events fixes issue #27225 --- src/material/slider/slider-input.ts | 2 ++ src/material/slider/slider-thumb.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/material/slider/slider-input.ts b/src/material/slider/slider-input.ts index f357d9dbabc8..73c418c3463a 100644 --- a/src/material/slider/slider-input.ts +++ b/src/material/slider/slider-input.ts @@ -269,6 +269,7 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA this._hostElement.addEventListener('pointerdown', this._onPointerDown.bind(this)); this._hostElement.addEventListener('pointermove', this._onPointerMove.bind(this)); this._hostElement.addEventListener('pointerup', this._onPointerUp.bind(this)); + this._hostElement.addEventListener('contextmenu', this._onPointerUp.bind(this)); }); } @@ -276,6 +277,7 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA this._hostElement.removeEventListener('pointerdown', this._onPointerDown); this._hostElement.removeEventListener('pointermove', this._onPointerMove); this._hostElement.removeEventListener('pointerup', this._onPointerUp); + this._hostElement.removeEventListener('contextmenu', this._onPointerUp); this._destroyed.next(); this._destroyed.complete(); this.dragStart.complete(); diff --git a/src/material/slider/slider-thumb.ts b/src/material/slider/slider-thumb.ts index 72b902a2fbf6..8a4e52395255 100644 --- a/src/material/slider/slider-thumb.ts +++ b/src/material/slider/slider-thumb.ts @@ -118,6 +118,7 @@ export class MatSliderVisualThumb implements _MatSliderVisualThumb, AfterViewIni input.addEventListener('pointerleave', this._onMouseLeave); input.addEventListener('focus', this._onFocus); input.addEventListener('blur', this._onBlur); + input.addEventListener('contextmenu', this._onDragEnd); }); } @@ -129,6 +130,7 @@ export class MatSliderVisualThumb implements _MatSliderVisualThumb, AfterViewIni input.removeEventListener('pointerleave', this._onMouseLeave); input.removeEventListener('focus', this._onFocus); input.removeEventListener('blur', this._onBlur); + input.removeEventListener('contextmenu', this._onDragEnd); } private _onPointerMove = (event: PointerEvent): void => { From 6cf89e875da22f2bd63a9380d2eed5c982decdaa Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Mon, 5 Jun 2023 12:14:24 -0400 Subject: [PATCH 2/3] fixup! fix(material/slider): handle contextmenu events --- src/material/slider/slider-input.ts | 4 +--- src/material/slider/slider-thumb.ts | 5 ++++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/material/slider/slider-input.ts b/src/material/slider/slider-input.ts index 73c418c3463a..898c46ee6f8f 100644 --- a/src/material/slider/slider-input.ts +++ b/src/material/slider/slider-input.ts @@ -269,7 +269,6 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA this._hostElement.addEventListener('pointerdown', this._onPointerDown.bind(this)); this._hostElement.addEventListener('pointermove', this._onPointerMove.bind(this)); this._hostElement.addEventListener('pointerup', this._onPointerUp.bind(this)); - this._hostElement.addEventListener('contextmenu', this._onPointerUp.bind(this)); }); } @@ -277,7 +276,6 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA this._hostElement.removeEventListener('pointerdown', this._onPointerDown); this._hostElement.removeEventListener('pointermove', this._onPointerMove); this._hostElement.removeEventListener('pointerup', this._onPointerUp); - this._hostElement.removeEventListener('contextmenu', this._onPointerUp); this._destroyed.next(); this._destroyed.complete(); this.dragStart.complete(); @@ -639,7 +637,7 @@ export class MatSliderRangeThumb extends MatSliderThumb implements _MatSliderRan } override _onPointerDown(event: PointerEvent): void { - if (this.disabled) { + if (this.disabled || event.button !== 0) { return; } if (this._sibling) { diff --git a/src/material/slider/slider-thumb.ts b/src/material/slider/slider-thumb.ts index 8a4e52395255..c3b6bb55e843 100644 --- a/src/material/slider/slider-thumb.ts +++ b/src/material/slider/slider-thumb.ts @@ -174,7 +174,10 @@ export class MatSliderVisualThumb implements _MatSliderVisualThumb, AfterViewIni this._hostElement.classList.remove('mdc-slider__thumb--focused'); }; - private _onDragStart = (): void => { + private _onDragStart = (event: PointerEvent): void => { + if (event.button !== 0) { + return; + } this._isActive = true; this._showActiveRipple(); }; From 7262d846cd9854cef3a2d4cea357272cec472f48 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Mon, 5 Jun 2023 12:25:56 -0400 Subject: [PATCH 3/3] fixup! fix(material/slider): handle contextmenu events --- src/material/slider/slider-thumb.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/material/slider/slider-thumb.ts b/src/material/slider/slider-thumb.ts index c3b6bb55e843..858465cc5200 100644 --- a/src/material/slider/slider-thumb.ts +++ b/src/material/slider/slider-thumb.ts @@ -118,7 +118,6 @@ export class MatSliderVisualThumb implements _MatSliderVisualThumb, AfterViewIni input.addEventListener('pointerleave', this._onMouseLeave); input.addEventListener('focus', this._onFocus); input.addEventListener('blur', this._onBlur); - input.addEventListener('contextmenu', this._onDragEnd); }); } @@ -130,7 +129,6 @@ export class MatSliderVisualThumb implements _MatSliderVisualThumb, AfterViewIni input.removeEventListener('pointerleave', this._onMouseLeave); input.removeEventListener('focus', this._onFocus); input.removeEventListener('blur', this._onBlur); - input.removeEventListener('contextmenu', this._onDragEnd); } private _onPointerMove = (event: PointerEvent): void => {