fix: drawer failing to cancel move event (#440)

emilkowalski · Sep 24, 2024 · 824ea35 · 824ea35
1 parent d0162ed
commit 824ea35
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git 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
@@ -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();
+});