Prevent accidental closing of SheetModal while x-scrolling

nimiq · Aug 31, 2023 · 2004965 · 2004965
1 parent 69da5b8
commit 2004965
Showing 1 changed file with 11 additions and 1 deletion.
diff --git a/src/components/atoms/SheetModal.vue b/src/components/atoms/SheetModal.vue
@@ -81,6 +81,16 @@ function onEnd(event: PointerEvent) {
   }
 }
 
+function onCancel(event: PointerEvent) {
+  dragging.value = false
+  container.value!.releasePointerCapture(event.pointerId)
+  animateShortly()
+  if (initialOpen)
+    open()
+  else
+    close()
+}
+
 function close() {
   emit('update:progress', 0)
 }
@@ -124,7 +134,7 @@ onBeforeUnmount(() => {
 <template>
   <article
     ref="container" class="absolute h-full touch-pan-x sheet-transition will-change-auto"
-    :style="style" @pointerdown.prevent="onStart" @pointermove.prevent="onMove" @pointerup.prevent="onEnd"
+    :style="style" @pointerdown="onStart" @pointermove="onMove" @pointerup="onEnd" @pointercancel="onCancel"
   >
     <slot name="dragger">
       <div class="relative">