Fix: add stopPropagation to draggable

7.4.8

Fix: timeout to prevent clicks

Fix: lower drag theshold

7.4.9

Fix: prevent click only when dragging

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "7.4.7",
+  "version": "7.4.9",
   "license": "BSD-3-Clause",
   "author": "katspaugh",
   "description": "Navigable audio waveform player",

src/draggable.ts

@@ -3,20 +3,27 @@ export function makeDraggable(
   onDrag: (dx: number, dy: number, x: number, y: number) => void,
   onStart?: (x: number, y: number) => void,
   onEnd?: () => void,
-  threshold = 5,
+  threshold = 3,
+  mouseButton = 0,
 ): () => void {
   if (!element) return () => void 0
 
   let unsubscribeDocument = () => void 0
 
   const onPointerDown = (event: PointerEvent) => {
-    if (event.button !== 0) return
+    if (event.button !== mouseButton) return
+
+    event.preventDefault()
+    event.stopPropagation()
 
     let startX = event.clientX
     let startY = event.clientY
     let isDragging = false
 
     const onPointerMove = (event: PointerEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+
       const x = event.clientX
       const y = event.clientY
       const dx = x - startX
@@ -46,8 +53,10 @@ export function makeDraggable(
     }
 
     const onClick = (event: MouseEvent) => {
-      event.stopPropagation()
-      event.preventDefault()
+      if (isDragging) {
+        event.stopPropagation()
+        event.preventDefault()
+      }
     }
 
     const onTouchMove = (event: TouchEvent) => {
@@ -67,7 +76,9 @@ export function makeDraggable(
       document.removeEventListener('pointerup', onPointerUp)
       document.removeEventListener('pointercancel', onPointerUp)
       document.removeEventListener('touchmove', onTouchMove)
-      element.removeEventListener('click', onClick, { capture: true })
+      setTimeout(() => {
+        element.removeEventListener('click', onClick, { capture: true })
+      }, 10)
     }
   }