From 5548a157e65276bd9a4af012b05493a222988957 Mon Sep 17 00:00:00 2001 From: Rahim Alwer Date: Mon, 22 Apr 2024 23:12:33 +1000 Subject: [PATCH] fix(player): releasing slider should not trigger other elements closes #1226 --- .../src/components/ui/sliders/slider/events-controller.ts | 6 +++++- packages/vidstack/src/utils/dom.ts | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/vidstack/src/components/ui/sliders/slider/events-controller.ts b/packages/vidstack/src/components/ui/sliders/slider/events-controller.ts index 8414c027f..6c3cae36b 100644 --- a/packages/vidstack/src/components/ui/sliders/slider/events-controller.ts +++ b/packages/vidstack/src/components/ui/sliders/slider/events-controller.ts @@ -149,7 +149,7 @@ export class SliderEventsController extends ViewController< private _attachPointerListeners() { if (this._delegate._isDisabled() || !this.$state.dragging()) return; - listenEvent(document, 'pointerup', this._onDocumentPointerUp.bind(this)); + listenEvent(document, 'pointerup', this._onDocumentPointerUp.bind(this), { capture: true }); listenEvent(document, 'pointermove', this._onDocumentPointerMove.bind(this)); listenEvent(document, 'touchmove', this._onDocumentTouchMove.bind(this), { passive: false, @@ -359,6 +359,10 @@ export class SliderEventsController extends ViewController< private _onDocumentPointerUp(event: PointerEvent) { if (event.button !== 0) return; + + event.preventDefault(); + event.stopImmediatePropagation(); + const value = this._getPointerValue(event); this._updatePointerValue(value, event); this._onStopDragging(value, event); diff --git a/packages/vidstack/src/utils/dom.ts b/packages/vidstack/src/utils/dom.ts index cae5e728d..8bcc18817 100644 --- a/packages/vidstack/src/utils/dom.ts +++ b/packages/vidstack/src/utils/dom.ts @@ -142,7 +142,7 @@ export function onPress( handler: (event: PointerEvent | KeyboardEvent) => void, ) { listenEvent(target, 'pointerup', (event) => { - if (event.button === 0) handler(event); + if (event.button === 0 && !event.defaultPrevented) handler(event); }); listenEvent(target, 'keydown', (event) => { if (isKeyboardClick(event)) handler(event);