fix: scrollable content drag on touch devices (#38)

Author: huntabyte

.changeset/young-readers-scream.md

@@ -0,0 +1,5 @@
+---
+"vaul-svelte": patch
+---
+
+fix: dragging scrollable content on touch devices

package.json

@@ -71,6 +71,6 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"bits-ui": "^0.13.3"
+		"bits-ui": "^0.16.0"
 	}
 }

pnpm-lock.yaml

@@ -7,10 +7,6 @@ const cache = new WeakMap();
 export function set(el?: Element | HTMLElement | null, styles?: Style, ignoreCache = false) {
 	if (!el || !(el instanceof HTMLElement) || !styles) return;
 
-	// if (el.hasAttribute('data-vaul-drawer')) {
-	// 	console.log(styles);
-	// }
-
 	const originalStyles: Style = {};
 
 	Object.entries(styles).forEach(([key, value]: [string, string]) => {

src/lib/internal/helpers/style.ts

@@ -57,8 +57,14 @@ export type CreateVaulProps = {
 	scrollLockTimeout?: number;
 	fixed?: boolean;
 	dismissible?: boolean;
-	onDrag?: (event: SvelteEvent<PointerEvent, HTMLElement>, percentageDragged: number) => void;
-	onRelease?: (event: SvelteEvent<PointerEvent | MouseEvent, HTMLElement>, open: boolean) => void;
+	onDrag?: (
+		event: SvelteEvent<PointerEvent | TouchEvent, HTMLElement>,
+		percentageDragged: number
+	) => void;
+	onRelease?: (
+		event: SvelteEvent<PointerEvent | MouseEvent | TouchEvent, HTMLElement>,
+		open: boolean
+	) => void;
 	modal?: boolean;
 	nested?: boolean;
 	onClose?: () => void;
@@ -342,21 +348,19 @@ export function createVaul(props: CreateVaulProps) {
 		return true;
 	}
 
-	function onDrag(event: SvelteEvent<PointerEvent, HTMLElement>) {
+	function onDrag(event: SvelteEvent<PointerEvent | TouchEvent, HTMLElement>) {
 		if (!isDragging) return;
 		// We need to know how much of the drawer has been dragged in percentages so that we can transform background accordingly
-		const draggedDistance = pointerStartY - event.screenY;
+		const draggedDistance = getDistanceMoved(pointerStartY, event);
 		const isDraggingDown = draggedDistance > 0;
 
 		const $activeSnapPointIndex = get(activeSnapPointIndex);
 		const $snapPoints = get(snapPoints);
 
 		// Disallow dragging down to close when first snap point is the active one and dismissible prop is set to false.
 		if ($snapPoints && $activeSnapPointIndex === 0 && !get(dismissible)) return;
+		if (!isAllowedToDrag && !shouldDrag(event.target as HTMLElement, isDraggingDown)) return;
 
-		if (!isAllowedToDrag && !shouldDrag(event.target as HTMLElement, isDraggingDown)) {
-			return;
-		}
 		const $drawerRef = get(drawerRef);
 		if (!$drawerRef) return;
 
@@ -390,7 +394,7 @@ export function createVaul(props: CreateVaulProps) {
 
 		// We need to capture last time when drag with scroll was triggered and have a timeout between
 		const absDraggedDistance = Math.abs(draggedDistance);
-		const wrapper = document.querySelector("[data-vaul-drawer-wrapper]");
+
 		let percentageDragged = absDraggedDistance / drawerHeightRef;
 		const snapPointPercentageDragged = getSnapPointsPercentageDragged(
 			absDraggedDistance,
@@ -418,6 +422,7 @@ export function createVaul(props: CreateVaulProps) {
 				true
 			);
 		}
+		const wrapper = document.querySelector("[data-vaul-drawer-wrapper]");
 
 		if (wrapper && $overlayRef && get(shouldScaleBackground)) {
 			// Calculate percentageDragged as a fraction (0 to 1)
@@ -555,6 +560,7 @@ export function createVaul(props: CreateVaulProps) {
 
 	function closeDrawer(withKeyboard: boolean = false) {
 		if (isClosing) return;
+
 		const $drawerRef = get(drawerRef);
 		if (!$drawerRef) return;
 
@@ -638,7 +644,7 @@ export function createVaul(props: CreateVaulProps) {
 		}
 	}
 
-	function onRelease(event: SvelteEvent<PointerEvent | MouseEvent, HTMLElement>) {
+	function onRelease(event: SvelteEvent<PointerEvent | MouseEvent | TouchEvent, HTMLElement>) {
 		const $drawerRef = get(drawerRef);
 		if (!isDragging || !$drawerRef) return;
 
@@ -664,7 +670,7 @@ export function createVaul(props: CreateVaulProps) {
 		if (dragStartTime === null) return;
 
 		const timeTaken = dragEndTime.getTime() - dragStartTime.getTime();
-		const distMoved = pointerStartY - event.screenY;
+		const distMoved = getDistanceMoved(pointerStartY, event);
 		const velocity = Math.abs(distMoved) / timeTaken;
 
 		if (velocity > 0.05) {
@@ -766,7 +772,7 @@ export function createVaul(props: CreateVaulProps) {
 	}
 
 	function onNestedDrag(
-		_: SvelteEvent<PointerEvent | MouseEvent, HTMLElement>,
+		_: SvelteEvent<PointerEvent | MouseEvent | TouchEvent, HTMLElement>,
 		percentageDragged: number
 	) {
 		if (percentageDragged < 0) return;
@@ -780,7 +786,10 @@ export function createVaul(props: CreateVaulProps) {
 		});
 	}
 
-	function onNestedRelease(_: SvelteEvent<PointerEvent | MouseEvent, HTMLElement>, o: boolean) {
+	function onNestedRelease(
+		_: SvelteEvent<PointerEvent | MouseEvent | TouchEvent, HTMLElement>,
+		o: boolean
+	) {
 		const scale = o ? (window.innerWidth - NESTED_DISPLACEMENT) / window.innerWidth : 1;
 		const y = o ? -NESTED_DISPLACEMENT : 0;
 
@@ -839,3 +848,13 @@ export function dampenValue(v: number) {
 function getScale() {
 	return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
 }
+
+function getDistanceMoved(
+	pointerStartY: number,
+	event: SvelteEvent<PointerEvent | MouseEvent | TouchEvent, HTMLElement>
+) {
+	if (event instanceof TouchEvent) {
+		return pointerStartY - event.changedTouches[0].screenY;
+	}
+	return pointerStartY - event.screenY;
+}

src/lib/internal/vaul.ts

@@ -5,6 +5,7 @@
 	import Visible from "./visible.svelte";
 
 	type $$Props = ContentProps;
+	type $$Events = DialogPrimitive.ContentEvents;
 
 	const {
 		refs: { drawerRef },
@@ -19,9 +20,21 @@
 <DialogPrimitive.Content
 	bind:el={$drawerRef}
 	style={$getContentStyle(style)}
-	on:pointermove={onDrag}
-	on:pointerdown={onPress}
-	on:pointerup={onRelease}
+	on:pointerdown={(e) => {
+		onPress(e);
+	}}
+	on:pointerup={(e) => {
+		onRelease(e);
+	}}
+	on:pointermove={(e) => {
+		onDrag(e);
+	}}
+	on:touchend={(e) => {
+		onRelease(e);
+	}}
+	on:touchmove={(e) => {
+		onDrag(e);
+	}}
 	data-vaul-drawer=""
 	data-vaul-drawer-visible={$visible ? "true" : "false"}
 	{...$$restProps}