@base-ui/react 1.6.0 → 1.7.0

package/drawer/viewport/DrawerViewportContext.d.mts

@@ -6,6 +6,5 @@ interface DrawerViewportContextValue {
   setSwipeDismissed: (dismissed: boolean) => void;
 }
 export declare const DrawerViewportContext: React.Context<DrawerViewportContextValue | null>;
-export declare function useDrawerViewportContext(optional?: false): DrawerViewportContextValue;
-export declare function useDrawerViewportContext(optional: true): DrawerViewportContextValue | null;
+export declare function useDrawerViewportContext(): DrawerViewportContextValue | null;
 export {};

package/drawer/viewport/DrawerViewportContext.d.ts

@@ -6,6 +6,5 @@ interface DrawerViewportContextValue {
   setSwipeDismissed: (dismissed: boolean) => void;
 }
 export declare const DrawerViewportContext: React.Context<DrawerViewportContextValue | null>;
-export declare function useDrawerViewportContext(optional?: false): DrawerViewportContextValue;
-export declare function useDrawerViewportContext(optional: true): DrawerViewportContextValue | null;
+export declare function useDrawerViewportContext(): DrawerViewportContextValue | null;
 export {};

package/drawer/viewport/DrawerViewportContext.js

@@ -2,20 +2,14 @@
 'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DrawerViewportContext = void 0;
 exports.useDrawerViewportContext = useDrawerViewportContext;
-var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 const DrawerViewportContext = exports.DrawerViewportContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") DrawerViewportContext.displayName = "DrawerViewportContext";
-function useDrawerViewportContext(optional) {
-  const context = React.useContext(DrawerViewportContext);
-  if (optional === false && context === null) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: DrawerViewportContext is missing. Drawer parts must be placed within <Drawer.Viewport>.' : (0, _formatErrorMessage2.default)(92));
-  }
-  return context;
+function useDrawerViewportContext() {
+  return React.useContext(DrawerViewportContext);
 }

package/drawer/viewport/DrawerViewportContext.mjs

@@ -1,13 +1,8 @@
 'use client';
 
-import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const DrawerViewportContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") DrawerViewportContext.displayName = "DrawerViewportContext";
-export function useDrawerViewportContext(optional) {
-  const context = React.useContext(DrawerViewportContext);
-  if (optional === false && context === null) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: DrawerViewportContext is missing. Drawer parts must be placed within <Drawer.Viewport>.' : _formatErrorMessage(92));
-  }
-  return context;
+export function useDrawerViewportContext() {
+  return React.useContext(DrawerViewportContext);
 }

package/drawer/viewport/DrawerViewportDataAttributes.d.mts

@@ -8,7 +8,7 @@ export declare enum DrawerViewportDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the drawer is animating in.
+   * Present when the drawer begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/drawer/viewport/DrawerViewportDataAttributes.d.ts

@@ -8,7 +8,7 @@ export declare enum DrawerViewportDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the drawer is animating in.
+   * Present when the drawer begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/drawer/viewport/DrawerViewportDataAttributes.js

@@ -15,7 +15,7 @@ let DrawerViewportDataAttributes = exports.DrawerViewportDataAttributes = functi
    */
   DrawerViewportDataAttributes[DrawerViewportDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the drawer is animating in.
+   * Present when the drawer begins animating in.
    */
   DrawerViewportDataAttributes[DrawerViewportDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/drawer/viewport/DrawerViewportDataAttributes.mjs

@@ -9,7 +9,7 @@ export let DrawerViewportDataAttributes = function (DrawerViewportDataAttributes
    */
   DrawerViewportDataAttributes[DrawerViewportDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the drawer is animating in.
+   * Present when the drawer begins animating in.
    */
   DrawerViewportDataAttributes[DrawerViewportDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/drawer/virtual-keyboard-provider/DrawerVirtualKeyboardProvider.js

@@ -12,6 +12,7 @@ var _addEventListener = require("@base-ui/utils/addEventListener");
 var _owner = require("@base-ui/utils/owner");
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _useTimeout = require("@base-ui/utils/useTimeout");
 var _DialogRootContext = require("../../dialog/root/DialogRootContext");
 var _clamp = require("../../internals/clamp");
 var _utils = require("../../floating-ui-react/utils");
@@ -26,6 +27,15 @@ const KEYBOARD_VISIBILITY_MARGIN = 16;
 // keyboard overlap, so the field can be scrolled clear of the keyboard instead of
 // ending up flush against it. Only applied when there is actual overlap.
 const KEYBOARD_SCROLL_SLACK = 48;
+// Cadence of the settle-watching realign passes after focus moves with the keyboard open:
+// long enough for a smooth scroll to show progress between passes, short enough to recover
+// quickly from a scroll canceled by WebKit's reveal; the pass count covers CSS transitions
+// reacting to the focus change (e.g. a 260ms footer resize) with room to spare.
+const KEYBOARD_REALIGN_INTERVAL = 150;
+const KEYBOARD_REALIGN_MAX_PASSES = 4;
+// Frames the alignment waits for the scroll destination to stop moving (layout reacting to
+// the focus change, e.g. a footer resizing over a CSS transition) before scrolling anyway.
+const KEYBOARD_SETTLE_FRAME_LIMIT = 60;
 const INPUT_TAP_MOVE_THRESHOLD = 10;
 const INPUT_TAP_HIT_SLOP = 16;
 const KEYBOARD_INPUT_TYPES = new Set(['email', 'number', 'password', 'search', 'tel', 'text', 'url']);
@@ -49,11 +59,10 @@ function DrawerVirtualKeyboardProvider(props) {
   const {
     children
   } = props;
-  const {
-    store
-  } = (0, _DialogRootContext.useDialogRootContext)();
+  const store = (0, _DialogRootContext.useDialogRootContext)();
   const open = store.useState('open');
   const mounted = store.useState('mounted');
+  const modal = store.useState('modal');
   const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
   const viewportElement = store.useState('viewportElement');
 
@@ -66,7 +75,9 @@ function DrawerVirtualKeyboardProvider(props) {
   const keyboardTouchStartRef = React.useRef(null);
   const focusedKeyboardTargetRef = React.useRef(null);
   const keyboardScrollAdjustmentRef = React.useRef(null);
+  const programmaticKeyboardFocusRef = React.useRef(false);
   const keyboardFocusFrame = (0, _useAnimationFrame.useAnimationFrame)();
+  const keyboardRealignTimeout = (0, _useTimeout.useTimeout)();
   const restoreKeyboardScrollAdjustment = (0, _useStableCallback.useStableCallback)(() => {
     const adjustment = keyboardScrollAdjustmentRef.current;
     if (!adjustment) {
@@ -134,46 +145,100 @@ function DrawerVirtualKeyboardProvider(props) {
     const doc = (0, _owner.ownerDocument)(rootElement);
     const win = (0, _owner.ownerWindow)(rootElement);
     const visualViewport = win.visualViewport;
+
+    // Alignment scroll bookkeeping: destination stability, whether a scroll was issued,
+    // and the last observed progress so delayed passes can distinguish moving from stalled.
+    let keyboardScrollElement = null;
+    let keyboardScrollDestination = 0;
+    let keyboardScrollChecks = 0;
+    let keyboardScrollObserved = -1;
     const setDrawerKeyboardInset = inset => {
       rootElement.style.setProperty(_DrawerViewportCssVars.DrawerViewportCssVars.keyboardInset, `${Math.max(0, Math.ceil(inset))}px`);
     };
-    const resetDrawerKeyboardInset = () => {
-      setDrawerKeyboardInset(0);
-    };
     const clearFocusedKeyboardTarget = () => {
       focusedKeyboardTargetRef.current = null;
-      resetDrawerKeyboardInset();
+      keyboardScrollElement = null;
+      setDrawerKeyboardInset(0);
       restoreKeyboardScrollAdjustment();
       keyboardFocusFrame.cancel();
+      keyboardRealignTimeout.clear();
+    };
+
+    // WebKit's native reveal scroll can move the page even while the scroll lock hides
+    // overflow (e.g. when the software keyboard's previous/next field arrows move focus).
+    // While the drawer is modal, any window scroll during keyboard interaction is spurious,
+    // so pin the page to the position it had when the drawer opened.
+    const baseScrollX = win.scrollX;
+    const baseScrollY = win.scrollY;
+    const restoreWindowScroll = () => {
+      if (modal !== true || nestedDrawerOpen || !focusedKeyboardTargetRef.current || getKeyboardVisualViewport(win) == null) {
+        return false;
+      }
+      if (win.scrollX !== baseScrollX || win.scrollY !== baseScrollY) {
+        // Force an instant jump: the two-argument form defaults `behavior` to `auto`, which
+        // obeys the page's `scroll-behavior`, so a global `scroll-behavior: smooth` would
+        // animate the restore. The measurements that follow assume the page is already back
+        // at rest, and a smooth restore also re-emits `scroll`, re-entering this handler.
+        win.scrollTo({
+          left: baseScrollX,
+          top: baseScrollY,
+          behavior: 'instant'
+        });
+        return true;
+      }
+      return false;
+    };
+
+    // Focus moved by the drawer itself goes through `focusKeyboardInputWithoutPageScroll`,
+    // but native focus changes (the iOS keyboard's previous/next field arrows) commit
+    // WebKit's reveal scroll before `focusin` reaches us — cancelling it afterwards
+    // visibly jitters the sheet. `focusout` on the outgoing field fires before focus
+    // lands, so override the incoming field's geometry there and restore it in `focusin`.
+    let restorePreemptedFocus = null;
+    const consumePreemptedFocus = () => {
+      restorePreemptedFocus?.();
+      restorePreemptedFocus = null;
+    };
+    const preemptFocusReveal = (target, keyboardViewport) => {
+      consumePreemptedFocus();
+
+      // Native focus carries no preventScroll, so a fake off-screen rect would make WebKit
+      // scroll the drawer's own scroll containers thousands of pixels chasing it. Presenting
+      // the field as already centered in the visible band above the keyboard instead makes
+      // both the in-page reveal and the viewport pan no-ops.
+      const rect = target.getBoundingClientRect();
+      restorePreemptedFocus = overrideGeometryDuringFocus(target, (keyboardViewport.top + keyboardViewport.bottom - rect.top - rect.bottom) / 2);
     };
     const alignFocusedKeyboardTarget = () => {
+      // If focus never lands on a preempted target, the focusout-scheduled alignment still
+      // restores it on the next frame before paint.
+      consumePreemptedFocus();
       const target = focusedKeyboardTargetRef.current;
       // If the focused field is removed from the DOM without firing `focusout` (e.g. it is
       // conditionally rendered away), any applied scroll slack is restored here on the next
       // focus/viewport event or when the drawer closes. This self-corrects rather than
       // tracking each field's lifecycle.
       if (nestedDrawerOpen || !target || !(0, _utils.contains)(rootElement, target)) {
-        resetDrawerKeyboardInset();
+        setDrawerKeyboardInset(0);
         restoreKeyboardScrollAdjustment();
         return;
       }
+
+      // Undo any reveal scroll WebKit applied to the locked page before measuring, so the
+      // keyboard inset and alignment are computed against the resting viewport.
+      restoreWindowScroll();
       const keyboardViewport = getKeyboardVisualViewport(win);
       if (!keyboardViewport) {
-        resetDrawerKeyboardInset();
+        setDrawerKeyboardInset(0);
         restoreKeyboardScrollAdjustment();
         return;
       }
-      setDrawerKeyboardInset(getDrawerKeyboardInset(win, keyboardViewport));
+      setDrawerKeyboardInset(Math.max(0, win.innerHeight - keyboardViewport.bottom));
       const scrollTarget = findKeyboardScrollTarget(target, rootElement);
       if (!scrollTarget) {
         restoreKeyboardScrollAdjustment();
         return;
       }
-      if (!scrollTarget.isConnected || !(0, _utils.contains)(rootElement, scrollTarget)) {
-        resetDrawerKeyboardInset();
-        restoreKeyboardScrollAdjustment();
-        return;
-      }
       const scrollTargetRect = scrollTarget.getBoundingClientRect();
       const clippedBottom = Math.min(scrollTargetRect.bottom, keyboardViewport.bottom);
       const overlap = Math.max(0, scrollTargetRect.bottom - keyboardViewport.bottom);
@@ -189,14 +254,70 @@ function DrawerVirtualKeyboardProvider(props) {
         return;
       }
       const targetRect = target.getBoundingClientRect();
-      const targetCenter = (targetRect.top + targetRect.bottom) / 2;
-      const visibleCenter = (visibleTop + visibleBottom) / 2;
-      const nextScrollTop = scrollTarget.scrollTop + targetCenter - visibleCenter;
-      animateKeyboardScroll(scrollTarget, (0, _clamp.clamp)(nextScrollTop, 0, maxScrollTop));
+      const nextScrollTop = scrollTarget.scrollTop + (targetRect.top + targetRect.bottom - visibleTop - visibleBottom) / 2;
+      const destination = Math.round((0, _clamp.clamp)(nextScrollTop, 0, maxScrollTop));
+      const settled = keyboardScrollElement === scrollTarget && Math.abs(keyboardScrollDestination - destination) <= 1;
+      if (!settled) {
+        // Commit the scroll only once the destination holds across two consecutive checks.
+        // Layout may still be reacting to the focus change (e.g. a footer sized by
+        // `:focus-within` resizing over a transition), and scrolling toward a
+        // mid-transition destination overshoots, then visibly pulls back once corrected.
+        // The destination is scroll-position-invariant, so an in-flight scroll of the
+        // container itself never defers the commit.
+        const checks = keyboardScrollElement === scrollTarget ? keyboardScrollChecks + 1 : 1;
+        keyboardScrollElement = scrollTarget;
+        keyboardScrollDestination = destination;
+        keyboardScrollChecks = checks;
+        keyboardScrollObserved = -1;
+        // Re-check next frame; give up and scroll anyway if layout never settles.
+        if (checks <= KEYBOARD_SETTLE_FRAME_LIMIT) {
+          keyboardFocusFrame.request(alignFocusedKeyboardTarget);
+          return;
+        }
+      } else if (keyboardScrollObserved >= 0) {
+        // A scroll toward this destination is already out. Leave it alone while it has
+        // arrived or is still progressing — re-issuing restarts the smooth-scroll easing
+        // curve, a visible stutter on every realign pass — and re-issue only when it
+        // stalled short (WebKit cancels in-flight smooth scrolls when its native reveal
+        // for the focus resolves).
+        const current = scrollTarget.scrollTop;
+        if (Math.abs(current - destination) <= 1) {
+          return;
+        }
+        if (current !== keyboardScrollObserved) {
+          keyboardScrollObserved = current;
+          return;
+        }
+      }
+      keyboardScrollElement = scrollTarget;
+      keyboardScrollDestination = destination;
+      keyboardScrollChecks = 0;
+      keyboardScrollObserved = scrollTarget.scrollTop;
+      animateKeyboardScroll(scrollTarget, destination);
     };
     const scheduleKeyboardFocusAlignment = () => {
       keyboardFocusFrame.request(alignFocusedKeyboardTarget);
     };
+
+    // When focus moves with the keyboard already up, no viewport resize events follow to
+    // re-run alignment, and the single frame-scheduled pass is unreliable: WebKit resolves
+    // the reveal for the focus asynchronously (a UI-process round trip) and cancels any
+    // in-flight scroll the pass started when it lands, and layout reacting to the focus
+    // change (e.g. a footer sized by `:focus-within` and the keyboard inset) settles only
+    // after its transition, so the pass measures stale geometry. Re-align on an interval
+    // until both settle; the alignment's scroll bookkeeping observes before re-issuing,
+    // so passes that find the scroll on course are inert.
+    const scheduleDelayedKeyboardRealign = () => {
+      let remainingPasses = KEYBOARD_REALIGN_MAX_PASSES;
+      const realign = () => {
+        alignFocusedKeyboardTarget();
+        remainingPasses -= 1;
+        if (remainingPasses > 0) {
+          keyboardRealignTimeout.start(KEYBOARD_REALIGN_INTERVAL, realign);
+        }
+      };
+      keyboardRealignTimeout.start(KEYBOARD_REALIGN_INTERVAL, realign);
+    };
     const captureFocusedKeyboardTarget = eventTarget => {
       if (nestedDrawerOpen) {
         return false;
@@ -208,16 +329,56 @@ function DrawerVirtualKeyboardProvider(props) {
       if (!target || !(0, _utils.contains)(rootElement, target)) {
         return false;
       }
+
+      // A new field starts a fresh alignment; the scroll bookkeeping must not carry
+      // over from the previous field's scroll.
+      if (focusedKeyboardTargetRef.current !== target) {
+        keyboardScrollElement = null;
+      }
       focusedKeyboardTargetRef.current = target;
       return true;
     };
     const handleFocusIn = event => {
-      if (captureFocusedKeyboardTarget((0, _utils.getTarget)(event))) {
-        scheduleKeyboardFocusAlignment();
+      // The programmatic transition is over once focus lands, which happens before
+      // `.focus()` returns. Any later `focusout` is the consumer's own — an `onFocus`
+      // handler that blurs or moves focus — and must be reconciled rather than
+      // suppressed, so stop suppressing here instead of waiting for `.focus()` to return.
+      programmaticKeyboardFocusRef.current = false;
+      consumePreemptedFocus();
+      if (!captureFocusedKeyboardTarget((0, _utils.getTarget)(event))) {
+        // Focus landed outside any drawer keyboard input. The `focusout` on the previous
+        // field normally clears the tracked target, but the tap path suppresses that
+        // `focusout` via `programmaticKeyboardFocusRef`, so a consumer `onFocus` handler that
+        // redirects focus out of the drawer would otherwise leave a stale target holding its
+        // inset, slack, and pending realign. Reconcile against the real focus here.
+        // A handler that ends focus entirely emits no `focusin` to reconcile from; that case
+        // is covered by clearing the suppression flag above so its `focusout` is handled.
+        clearFocusedKeyboardTarget();
+        return;
       }
+
+      // Covers every way focus can land with the keyboard already up: native moves (the
+      // keyboard's previous/next arrows) and the tap path (which suppresses `focusout`
+      // handling via the programmatic flag).
+      if (getKeyboardVisualViewport(win) != null) {
+        scheduleDelayedKeyboardRealign();
+      }
+      scheduleKeyboardFocusAlignment();
     };
     const handleFocusOut = event => {
+      // The blur inside `focusKeyboardInputWithoutPageScroll` is followed synchronously by
+      // a re-focus; clearing state here would drop the keyboard inset for a frame.
+      if (programmaticKeyboardFocusRef.current) {
+        return;
+      }
       if (captureFocusedKeyboardTarget(event.relatedTarget)) {
+        const target = focusedKeyboardTargetRef.current;
+        const keyboardViewport = getKeyboardVisualViewport(win);
+        // The delayed realign passes are scheduled by the `focusin` that follows once
+        // focus lands on the captured target.
+        if (target && keyboardViewport) {
+          preemptFocusReveal(target, keyboardViewport);
+        }
         scheduleKeyboardFocusAlignment();
         return;
       }
@@ -232,25 +393,36 @@ function DrawerVirtualKeyboardProvider(props) {
     if (visualViewport) {
       cleanupListeners.push((0, _addEventListener.addEventListener)(visualViewport, 'resize', handleViewportUpdate), (0, _addEventListener.addEventListener)(visualViewport, 'scroll', handleViewportUpdate));
     }
-    cleanupListeners.push((0, _addEventListener.addEventListener)(doc, 'focusin', handleFocusIn, true), (0, _addEventListener.addEventListener)(doc, 'focusout', handleFocusOut, true));
+    const handleWindowScroll = () => {
+      if (restoreWindowScroll()) {
+        // Recompute the keyboard inset once the page is back at rest; measurements taken
+        // mid-reveal (a non-zero visual viewport offset) inflate it and push the popup up.
+        scheduleKeyboardFocusAlignment();
+      }
+    };
+
+    // Once the user puts a finger down they own the scroll position. Stop both the frame settle
+    // loop, which can center after changing layout settles, and the delayed passes, which can't
+    // distinguish a user scroll from a reveal scroll WebKit canceled. A later focus or viewport
+    // change reschedules alignment if it's still needed.
+    const cancelKeyboardRealignOnPointerDown = () => {
+      keyboardFocusFrame.cancel();
+      keyboardRealignTimeout.clear();
+      keyboardScrollElement = null;
+    };
+    cleanupListeners.push((0, _addEventListener.addEventListener)(doc, 'focusin', handleFocusIn, true), (0, _addEventListener.addEventListener)(doc, 'focusout', handleFocusOut, true), (0, _addEventListener.addEventListener)(win, 'scroll', handleWindowScroll), (0, _addEventListener.addEventListener)(doc, 'pointerdown', cancelKeyboardRealignOnPointerDown, true));
     if (captureFocusedKeyboardTarget((0, _utils.activeElement)(doc))) {
       scheduleKeyboardFocusAlignment();
     }
     return () => {
       cleanupListeners.forEach(cleanup => cleanup());
+      consumePreemptedFocus();
       clearFocusedKeyboardTarget();
       rootElement.style.removeProperty(_DrawerViewportCssVars.DrawerViewportCssVars.keyboardInset);
     };
-  }, [animateKeyboardScroll, keyboardFocusFrame, mounted, nestedDrawerOpen, open, restoreKeyboardScrollAdjustment, rootElement, setKeyboardScrollSlack]);
+  }, [animateKeyboardScroll, keyboardFocusFrame, keyboardRealignTimeout, modal, mounted, nestedDrawerOpen, open, restoreKeyboardScrollAdjustment, rootElement, setKeyboardScrollSlack]);
   const onTouchStart = (0, _useStableCallback.useStableCallback)(event => {
-    if (!open || !mounted || nestedDrawerOpen) {
-      resetTouchTrackingState();
-      return;
-    }
     const touch = event.touches[0];
-    if (!touch) {
-      return;
-    }
     pendingKeyboardFocusMovedRef.current = false;
     keyboardTouchStartRef.current = {
       x: touch.clientX,
@@ -276,9 +448,9 @@ function DrawerVirtualKeyboardProvider(props) {
       return;
     }
     const touch = event.changedTouches[0] ?? event.touches[0];
-    const doc = (0, _owner.ownerDocument)(event.currentTarget);
+    const root = rootElement.getRootNode();
     const nativeEventTarget = (0, _utils.getTarget)(event.nativeEvent);
-    const pointTarget = touch ? resolveKeyboardTouchTargetFromPoint(doc, touch.clientX, touch.clientY) : null;
+    const pointTarget = touch ? resolveKeyboardTouchTargetFromPoint(root, touch.clientX, touch.clientY) : null;
 
     // The lift point landed on another interactive/label element; let its native tap
     // through instead of stealing it for the touchstart input.
@@ -307,15 +479,24 @@ function DrawerVirtualKeyboardProvider(props) {
 
       // Already focused with the keyboard up: let the native tap through so it can
       // reposition the caret, rather than blurring and re-focusing the same input.
-      if ((0, _utils.activeElement)((0, _owner.ownerDocument)(keyboardFocusTarget)) === keyboardFocusTarget && isKeyboardVisualViewportOpen(win)) {
+      if ((0, _utils.activeElement)((0, _owner.ownerDocument)(keyboardFocusTarget)) === keyboardFocusTarget && (!win.visualViewport || getKeyboardVisualViewport(win) != null)) {
         resetTouchTrackingState();
         return;
       }
 
       // iOS only opens the software keyboard when focus happens synchronously
-      // inside the touch gesture.
+      // inside the touch gesture. The flag suppresses the `focusout` cleanup the
+      // intermediate blur would otherwise trigger, so the keyboard inset isn't
+      // dropped for a frame between the blur and the re-focus. It is cleared by the
+      // `focusin` that lands, so only that blur is suppressed; the `finally` is the
+      // backstop for a target that never takes focus.
       event.preventDefault();
-      focusKeyboardInputWithoutPageScroll(keyboardFocusTarget);
+      programmaticKeyboardFocusRef.current = true;
+      try {
+        focusKeyboardInputWithoutPageScroll(keyboardFocusTarget);
+      } finally {
+        programmaticKeyboardFocusRef.current = false;
+      }
       // Preventing the touchend default also suppresses the compatibility mouse
       // events, including `click`; redispatch an untrusted replacement on the
       // original tap target so click handlers still run with the tap coordinates.
@@ -360,13 +541,16 @@ function resolveKeyboardInputTarget(target) {
   return (0, _dom.isHTMLElement)(control) && isKeyboardInputElement(control) ? control : null;
 }
 function resolveKeyboardTouchTarget(target) {
+  if (!(0, _dom.isHTMLElement)(target)) {
+    return null;
+  }
   const focusTarget = resolveKeyboardInputTarget(target);
   if (!focusTarget) {
     return null;
   }
   return {
     focusTarget,
-    clickTarget: (0, _dom.isHTMLElement)(target) ? target : focusTarget
+    clickTarget: target
   };
 }
 
@@ -379,14 +563,16 @@ function getContentEditableHost(element) {
   }
   return host;
 }
-function resolveKeyboardTouchTargetFromPoint(doc, clientX, clientY) {
-  const exactTarget = (0, _getElementAtPoint.getElementAtPoint)(doc, clientX, clientY);
-  const exactKeyboardTarget = resolveKeyboardInputTarget(exactTarget);
-  if (exactKeyboardTarget) {
-    return {
-      focusTarget: exactKeyboardTarget,
-      clickTarget: (0, _dom.isHTMLElement)(exactTarget) ? exactTarget : exactKeyboardTarget
-    };
+function resolveKeyboardTouchTargetFromPoint(root, clientX, clientY) {
+  const exactTarget = (0, _getElementAtPoint.getElementAtPoint)(root, clientX, clientY);
+  if ((0, _dom.isHTMLElement)(exactTarget)) {
+    const exactKeyboardTarget = resolveKeyboardInputTarget(exactTarget);
+    if (exactKeyboardTarget) {
+      return {
+        focusTarget: exactKeyboardTarget,
+        clickTarget: exactTarget
+      };
+    }
   }
 
   // Probing nearby points compensates for iOS retargeting taps while the page reacts
@@ -399,7 +585,7 @@ function resolveKeyboardTouchTargetFromPoint(doc, clientX, clientY) {
     return KEYBOARD_TAP_BLOCKED;
   }
   for (const [offsetX, offsetY] of [[0, INPUT_TAP_HIT_SLOP], [0, -INPUT_TAP_HIT_SLOP], [INPUT_TAP_HIT_SLOP, 0], [-INPUT_TAP_HIT_SLOP, 0]]) {
-    const keyboardTarget = resolveKeyboardInputTarget((0, _getElementAtPoint.getElementAtPoint)(doc, clientX + offsetX, clientY + offsetY));
+    const keyboardTarget = resolveKeyboardInputTarget((0, _getElementAtPoint.getElementAtPoint)(root, clientX + offsetX, clientY + offsetY));
     if (keyboardTarget) {
       return {
         focusTarget: keyboardTarget,
@@ -423,15 +609,10 @@ function dispatchKeyboardClick(target, touch) {
 }
 function focusKeyboardInputWithoutPageScroll(target) {
   const wasFocused = (0, _utils.activeElement)((0, _owner.ownerDocument)(target)) === target;
-  const previousOpacity = target.style.opacity;
-  const previousTransform = target.style.transform;
-  const previousTransition = target.style.transition;
-
   // iOS Safari can still scroll the page for transformed sheets even with preventScroll.
-  // Move the input off-screen only for the synchronous focus call.
-  target.style.transition = 'none';
-  target.style.opacity = '0';
-  target.style.transform = 'translateY(-2000px)';
+  // Move the input off-screen only for the synchronous focus call; `preventScroll`
+  // suppresses the in-page ancestor scrolling that would otherwise chase the fake rect.
+  const restoreStyles = overrideGeometryDuringFocus(target, -2000);
   try {
     if (wasFocused) {
       target.blur();
@@ -440,10 +621,25 @@ function focusKeyboardInputWithoutPageScroll(target) {
       preventScroll: true
     });
   } finally {
+    restoreStyles();
+  }
+}
+
+// Overrides the painted geometry WebKit samples when an element gains focus. The rect is
+// hidden (opacity) rather than detached so layout is unaffected; the caller must restore
+// synchronously before the next paint.
+function overrideGeometryDuringFocus(target, translateY) {
+  const previousOpacity = target.style.opacity;
+  const previousTransform = target.style.transform;
+  const previousTransition = target.style.transition;
+  target.style.transition = 'none';
+  target.style.opacity = '0';
+  target.style.transform = `translateY(${translateY}px)`;
+  return () => {
     target.style.opacity = previousOpacity;
     target.style.transform = previousTransform;
     target.style.transition = previousTransition;
-  }
+  };
 }
 function findKeyboardScrollTarget(target, root) {
   // Start at the parent: scrolling the focused field's own content (an overflowing
@@ -470,10 +666,4 @@ function getKeyboardVisualViewport(win) {
     top,
     bottom: Math.min(win.innerHeight, top + visualViewport.height)
   };
-}
-function getDrawerKeyboardInset(win, keyboardViewport) {
-  return Math.max(0, win.innerHeight - keyboardViewport.bottom);
-}
-function isKeyboardVisualViewportOpen(win) {
-  return !win.visualViewport || getKeyboardVisualViewport(win) != null;
 }