From 824ea3550da81663b3d2cc809f1a24cd3ad3db38 Mon Sep 17 00:00:00 2001
From: Emil Kowalski <36730035+emilkowalski@users.noreply.github.com>
Date: Tue, 24 Sep 2024 06:19:15 +0200
Subject: [PATCH] fix: drawer failing to cancel move event (#440)

---
 src/index.tsx           | 16 ++++++++++++++++
 test/tests/base.spec.ts | 10 ++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/index.tsx b/src/index.tsx
index 3cc98b28..fc9663b2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -731,6 +731,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(function (
   const [delayedSnapPoints, setDelayedSnapPoints] = React.useState(false);
   const composedRef = useComposedRefs(ref, drawerRef);
   const pointerStartRef = React.useRef<{ x: number; y: number } | null>(null);
+  const lastKnownPointerEventRef = React.useRef<React.PointerEvent<HTMLDivElement> | null>(null);
   const wasBeyondThePointRef = React.useRef(false);
   const hasSnapPoints = snapPoints && snapPoints.length > 0;
   useScaleBackground();
@@ -767,6 +768,12 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(function (
     }
   }, []);
 
+  function handleOnPointerUp(event: React.PointerEvent<HTMLDivElement>) {
+    pointerStartRef.current = null;
+    wasBeyondThePointRef.current = false;
+    onRelease(event);
+  }
+
   return (
     <DialogPrimitive.Content
       data-vaul-drawer-direction={direction}
@@ -810,6 +817,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(function (
         }
       }}
       onPointerMove={(event) => {
+        lastKnownPointerEventRef.current = event;
         if (handleOnly) return;
         rest.onPointerMove?.(event);
         if (!pointerStartRef.current) return;
@@ -831,6 +839,14 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(function (
         wasBeyondThePointRef.current = false;
         onRelease(event);
       }}
+      onPointerOut={(event) => {
+        rest.onPointerOut?.(event);
+        handleOnPointerUp(lastKnownPointerEventRef.current);
+      }}
+      onContextMenu={(event) => {
+        rest.onContextMenu?.(event);
+        handleOnPointerUp(lastKnownPointerEventRef.current);
+      }}
     />
   );
 });
diff --git a/test/tests/base.spec.ts b/test/tests/base.spec.ts
index 6c02a940..9848655a 100644
--- a/test/tests/base.spec.ts
+++ b/test/tests/base.spec.ts
@@ -66,3 +66,13 @@ test.describe('Base tests', () => {
     await expect(page.getByTestId('content')).toBeVisible();
   });
 });
+
+test('should close when dragged down and cancelled', async ({ page }) => {
+  await openDrawer(page);
+  await page.hover('[data-vaul-drawer]');
+  await page.mouse.down();
+  await page.mouse.move(0, 800);
+  await page.dispatchEvent('[data-vaul-drawer]', 'contextmenu');
+  await page.waitForTimeout(ANIMATION_DURATION);
+  await expect(page.getByTestId('content')).not.toBeVisible();
+});