[drawer] Fix popup flashing fully open for a frame on swipe area re-grab (#5112)

Author: atomiks

packages/react/src/drawer/root/DrawerRoot.tsx

@@ -76,6 +76,7 @@ export function DrawerRoot<Payload = unknown>(props: DrawerRoot.Props<Payload>)
   });
 
   const isNestedDrawerOpenRef = React.useRef(false);
+  const swipeAreaActiveRef = React.useRef(false);
 
   const setActiveSnapPoint = useStableCallback(
     (
@@ -172,6 +173,7 @@ export function DrawerRoot<Payload = unknown>(props: DrawerRoot.Props<Payload>)
   const contextValue: DrawerRootContext = React.useMemo(
     () => ({
       swipeDirection,
+      swipeAreaActiveRef,
       snapToSequentialPoints,
       snapPoints,
       activeSnapPoint: resolvedActiveSnapPoint,
@@ -210,6 +212,7 @@ export function DrawerRoot<Payload = unknown>(props: DrawerRoot.Props<Payload>)
       setActiveSnapPoint,
       snapPoints,
       snapToSequentialPoints,
+      swipeAreaActiveRef,
       swipeDirection,
     ],
   );

packages/react/src/drawer/root/DrawerRootContext.ts

@@ -13,6 +13,11 @@ export interface DrawerNestedSwipeProgressStore {
 
 export interface DrawerRootContext {
   swipeDirection: DrawerSwipeDirection;
+  /**
+   * Whether `Drawer.SwipeArea` is currently driving an open gesture (writing the popup's
+   * swipe-movement vars imperatively). The viewport reads this to skip resetting them on open.
+   */
+  swipeAreaActiveRef: React.MutableRefObject<boolean>;
   /**
    * Whether to disable velocity-based snap skipping.
    */

packages/react/src/drawer/swipe-area/DrawerSwipeArea.test.tsx

@@ -612,6 +612,101 @@ describe('<Drawer.SwipeArea />', () => {
     expect(swipeArea).toHaveAttribute('data-open', '');
   });
 
+  it.skipIf(isJSDOM)(
+    'keeps the swipe-area movement on the popup when re-grabbed during close',
+    async () => {
+      // Regression guard for the swipe-area re-grab flash. When the swipe area drives the open, the
+      // popup's `--drawer-swipe-movement-*` are written imperatively by `applySwipeMovement`, but
+      // the viewport's open-reset effect would otherwise zero them
+      // (`resetSwipe` -> `syncDragStyles(false)`) on the same commit that flips `open` true,
+      // flashing the popup fully open for a frame. The shared `swipeAreaActiveRef` must make the
+      // viewport skip that reset while the swipe area owns the gesture.
+      //
+      // The flash only reproduces on a *re-grab*, i.e. when the popup is already mounted as the open
+      // commit lands. A real exit animation keeps the popup mounted (`mounted` stays true) through
+      // the close, so the re-grab below drives a fresh open while it is still in the DOM.
+      globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
+
+      const style = `
+        @keyframes swipe-regrab-exit {
+          to {
+            opacity: 0;
+          }
+        }
+
+        .swipe-regrab-popup {
+          height: 200px;
+        }
+
+        .swipe-regrab-popup[data-ending-style] {
+          animation: swipe-regrab-exit 200ms;
+        }
+      `;
+
+      try {
+        await render(
+          <div>
+            {/* eslint-disable-next-line react/no-danger */}
+            <style dangerouslySetInnerHTML={{ __html: style }} />
+            <Drawer.Root>
+              <Drawer.SwipeArea data-testid="swipe-area" />
+              <Drawer.Portal>
+                <Drawer.Viewport>
+                  <Drawer.Popup className="swipe-regrab-popup" data-testid="popup">
+                    <Drawer.Close>Close</Drawer.Close>
+                  </Drawer.Popup>
+                </Drawer.Viewport>
+              </Drawer.Portal>
+            </Drawer.Root>
+          </div>,
+        );
+
+        const swipeArea = screen.getByTestId('swipe-area');
+
+        await swipeUp(swipeArea, 220, 20);
+        expect(swipeArea).toHaveAttribute('data-open', '');
+
+        const popup = screen.getByTestId('popup');
+
+        // Begin closing; the exit animation keeps the popup mounted while it plays.
+        await act(async () => {
+          screen.getByRole('button', { name: 'Close' }).click();
+        });
+        await waitFor(() => {
+          expect(popup).toHaveAttribute('data-ending-style');
+        });
+
+        // Re-grab while the popup is still mounted mid-exit. A single move that locks the direction,
+        // re-opens the drawer, and writes the movement (200 - 80 = 120px of remaining travel) on the
+        // commit that flips `open` back to true.
+        fireEvent.pointerDown(swipeArea, {
+          button: 0,
+          buttons: 1,
+          pointerId: 1,
+          clientX: 10,
+          clientY: 120,
+          pointerType: 'mouse',
+        });
+        await flushMicrotasks();
+
+        fireEvent.pointerMove(swipeArea, {
+          pointerId: 1,
+          clientX: 10,
+          clientY: 40,
+          buttons: 1,
+          pointerType: 'mouse',
+        });
+        await flushMicrotasks();
+
+        expect(swipeArea).toHaveAttribute('data-open', '');
+        // The viewport's open-reset must not have clobbered the swipe area's value back to `0px`.
+        expect(popup.style.getPropertyValue('--drawer-swipe-movement-y')).toBe('120px');
+      } finally {
+        globalThis.BASE_UI_ANIMATIONS_DISABLED = true;
+      }
+    },
+  );
+
   it('opens on a quick flick whose only move is already released (buttons: 0)', async () => {
     // On a fast flick — especially on a low-refresh-rate display — the pointer can be lifted before
     // the first `pointermove` is sampled, so the single move arrives with `buttons: 0` and no

packages/react/src/drawer/swipe-area/DrawerSwipeArea.tsx

@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { useDialogRootContext } from '../../dialog/root/DialogRootContext';
 import { useRenderElement } from '../../internals/useRenderElement';
@@ -91,7 +92,7 @@ export const DrawerSwipeArea = React.forwardRef(function DrawerSwipeArea(
   } = componentProps;
 
   const { store } = useDialogRootContext();
-  const { swipeDirection, frontmostHeight } = useDrawerRootContext();
+  const { swipeDirection, frontmostHeight, swipeAreaActiveRef } = useDrawerRootContext();
   const providerContext = useDrawerProviderContext(true);
 
   const [swipeActive, setSwipeActive] = React.useState(false);
@@ -257,6 +258,7 @@ export const DrawerSwipeArea = React.forwardRef(function DrawerSwipeArea(
       frontmostHeight: openProgress > 0 ? frontmostHeight : 0,
     });
     appliedSwipeStylesRef.current = true;
+    swipeAreaActiveRef.current = true;
   }
 
   const clearSwipeStyles = useStableCallback(() => {
@@ -281,6 +283,7 @@ export const DrawerSwipeArea = React.forwardRef(function DrawerSwipeArea(
 
     providerContext?.visualStateStore.set({ swipeProgress: 0, frontmostHeight: 0 });
     appliedSwipeStylesRef.current = false;
+    swipeAreaActiveRef.current = false;
   });
 
   function openDrawer(event?: PointerEvent | TouchEvent) {
@@ -397,6 +400,15 @@ export const DrawerSwipeArea = React.forwardRef(function DrawerSwipeArea(
   const swipeTouchProps = swipe.getTouchProps();
   const resetSwipe = swipe.reset;
 
+  // The commit that opens the drawer re-renders the popup, resetting `--swipe-movement-*` to `0px`
+  // (the viewport isn't swiping). Re-assert after the DOM mutation but before paint. No deps: must
+  // run on every commit the swipe area participates in.
+  useIsoLayoutEffect(() => {
+    if (swipeActive && appliedSwipeStylesRef.current) {
+      applySwipeMovement();
+    }
+  });
+
   React.useEffect(() => {
     if (!enabled) {
       resetSwipe();

packages/react/src/drawer/viewport/DrawerViewport.tsx

@@ -80,6 +80,7 @@ export const DrawerViewport = React.forwardRef(function DrawerViewport(
     notifyParentSwipeProgressChange,
     frontmostHeight,
     snapToSequentialPoints,
+    swipeAreaActiveRef,
   } = useDrawerRootContext();
   const providerContext = useDrawerProviderContext(true);
   const {
@@ -974,10 +975,16 @@ export const DrawerViewport = React.forwardRef(function DrawerViewport(
 
   React.useEffect(() => {
     if (open) {
-      resetSwipe();
+      // Skip `resetSwipe` while `Drawer.SwipeArea` is driving the open: it zeroes the popup's
+      // `--swipe-movement-*` (via `syncDragStyles(false)`), flashing it fully open for a frame.
+      // `clearSwipeRelease` doesn't touch those vars, so always run it to clear any leftover
+      // release state from a prior dismiss (e.g. when the popup is kept mounted).
+      if (!swipeAreaActiveRef.current) {
+        resetSwipe();
+      }
       clearSwipeRelease();
     }
-  }, [clearSwipeRelease, open, resetSwipe]);
+  }, [clearSwipeRelease, open, resetSwipe, swipeAreaActiveRef]);
 
   React.useEffect(() => {
     const backdropElement = backdropRef.current;

packages/react/src/utils/useSwipeDismiss.test.tsx

@@ -528,6 +528,94 @@ describe('useSwipeDismiss', () => {
     expect(element.style.getPropertyValue('--y')).toBe('40px');
   });
 
+  it('keeps the drag transform on a render that lags behind the swiping state', async () => {
+    let initialGetDragStyles: (() => React.CSSProperties) | undefined;
+
+    function SwipeBoxCaptureStyles() {
+      const ref = React.useRef<HTMLDivElement>(null);
+      const swipe = useSwipeDismiss({
+        enabled: true,
+        directions: ['down'],
+        elementRef: ref,
+        movementCssVars: { x: '--x', y: '--y' },
+      });
+
+      // Capture the latest `getDragStyles` from a render where the `isSwiping` state is still
+      // false. This stands in for a render that commits during a gesture before `setSwiping(true)`
+      // has flushed: its output must still mirror `isSwipingRef` so reconciling it onto the DOM
+      // does not strip the transform the imperative writer set. Gating on `!swipe.swiping` (rather
+      // than capturing only the very first render) keeps the reference tied to the surviving hook
+      // instance under StrictMode's mount/unmount/remount.
+      if (!swipe.swiping) {
+        initialGetDragStyles = swipe.getDragStyles;
+      }
+
+      return (
+        <div
+          data-testid="el"
+          ref={ref}
+          style={swipe.getDragStyles()}
+          {...swipe.getPointerProps()}
+        />
+      );
+    }
+
+    await render(<SwipeBoxCaptureStyles />);
+    const element = screen.getByTestId('el');
+
+    fireEvent.pointerDown(element, {
+      button: 0,
+      buttons: 1,
+      pointerId: 1,
+      clientX: 0,
+      clientY: 0,
+      bubbles: true,
+      pointerType: 'mouse',
+      movementX: 0,
+      movementY: 0,
+    });
+
+    await flushMicrotasks();
+
+    // The first move only establishes the drag baseline.
+    fireEvent.pointerMove(element, {
+      buttons: 1,
+      pointerId: 1,
+      clientX: 0,
+      clientY: 0,
+      bubbles: true,
+      pointerType: 'mouse',
+      movementX: 0,
+      movementY: 0,
+    });
+
+    await flushMicrotasks();
+
+    fireEvent.pointerMove(element, {
+      buttons: 1,
+      pointerId: 1,
+      clientX: 0,
+      clientY: 40,
+      bubbles: true,
+      pointerType: 'mouse',
+      movementX: 0,
+      movementY: 40,
+    });
+
+    await flushMicrotasks();
+
+    // The gesture is active: `isSwipingRef` is true and the transform was written imperatively.
+    expect(element.style.transition).toBe('none');
+
+    // The lagging render's `getDragStyles` (captured while the `isSwiping` state was false) must
+    // still emit `transition: 'none'` and the current drag transform, otherwise React would drop
+    // the popup to its resting transform for a frame mid-gesture.
+    expect(initialGetDragStyles).toBeDefined();
+    const laggingStyles = initialGetDragStyles?.() ?? {};
+    expect(laggingStyles.transition).toBe('none');
+    expect(laggingStyles.transform).toMatch(/translate3d\(0px, ?40px, ?0(?:px)?\)/);
+  });
+
   it('respects custom swipeThreshold', async () => {
     const onDismiss = vi.fn();
 

packages/react/src/utils/useSwipeDismiss.ts

@@ -1057,27 +1057,31 @@ export function useSwipeDismiss(options: UseSwipeDismissOptions): UseSwipeDismis
   });
 
   const getDragStyles = React.useCallback((): React.CSSProperties => {
+    // Read `isSwipingRef`, not the lagging `isSwiping` state, to match the imperative writer
+    // `syncDragStyles`. Otherwise a render that commits before `setSwiping(true)` flushes strips the
+    // transform it just wrote, flashing the popup to its resting position for a frame.
+    const swiping = isSwipingRef.current;
     const dragOffset = dragOffsetRef.current;
     const initialTransform = initialTransformRef.current;
     const deltaX = dragOffset.x - initialTransform.x;
     const deltaY = dragOffset.y - initialTransform.y;
 
-    if (!isSwiping && deltaX === 0 && deltaY === 0 && !dragDismissed) {
+    if (!swiping && deltaX === 0 && deltaY === 0 && !dragDismissed) {
       return {
         [movementCssVars.x]: '0px',
         [movementCssVars.y]: '0px',
       } as React.CSSProperties;
     }
 
     return {
-      transition: isSwiping ? 'none' : undefined,
+      transition: swiping ? 'none' : undefined,
       // While swiping, freeze the element at its current visual transform so it doesn't snap to the
       // end position.
-      transform: isSwiping ? getDragTransform(dragOffset, initialTransform.scale) : undefined,
+      transform: swiping ? getDragTransform(dragOffset, initialTransform.scale) : undefined,
       [movementCssVars.x]: `${deltaX}px`,
       [movementCssVars.y]: `${deltaY}px`,
     } as React.CSSProperties;
-  }, [dragDismissed, isSwiping, movementCssVars]);
+  }, [dragDismissed, movementCssVars]);
 
   const getPointerProps = React.useCallback(() => {
     if (!enabled) {