From 13eafc2a727efdfdb1a6aa4aaf5dbc72419a2764 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?=
 <nikolas.schroeter@widynski.technology>
Date: Mon, 25 May 2026 18:09:07 +0200
Subject: [PATCH 1/7] fix: modal layout shift when auto-focusing input

---
 packages/react-aria-components/src/Modal.tsx  | 59 +++++++++++++++----
 .../src/overlays/usePreventScroll.ts          | 40 ++++++++-----
 2 files changed, 73 insertions(+), 26 deletions(-)

diff --git a/packages/react-aria-components/src/Modal.tsx b/packages/react-aria-components/src/Modal.tsx
index ecde2ec2385..2d918a5763a 100644
--- a/packages/react-aria-components/src/Modal.tsx
+++ b/packages/react-aria-components/src/Modal.tsx
@@ -11,7 +11,8 @@
  */
 
 import {AriaModalOverlayProps, useModalOverlay} from 'react-aria/useModalOverlay';
-
+import {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';
+import {willOpenKeyboard} from 'react-aria/private/utils/keyboard';
 import {
   ClassNameOrFunction,
   ContextValue,
@@ -34,11 +35,21 @@ import {
   useOverlayTriggerState
 } from 'react-stately/useOverlayTriggerState';
 import {OverlayTriggerStateContext} from './Dialog';
-import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo, useRef} from 'react';
+import React, {
+  createContext,
+  ForwardedRef,
+  forwardRef,
+  useContext,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
 import {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';
 import {useIsSSR} from 'react-aria/SSRProvider';
 import {useObjectRef} from 'react-aria/useObjectRef';
 import {useViewportSize} from 'react-aria/private/utils/useViewportSize';
+import {getActiveElement} from 'react-aria/private/utils/shadowdom/DOMFunctions';
+import {useVisuallyHidden} from 'react-aria/VisuallyHidden';
 
 export interface ModalOverlayProps
   extends
@@ -300,11 +311,12 @@ interface ModalContentProps
 
 function ModalContent(props: ModalContentProps) {
   let {modalProps, modalRef, isExiting, isDismissable} = useContext(InternalModalContext)!;
+  let [isOpen, setOpen] = useState(false);
   let state = useContext(OverlayTriggerStateContext)!;
   let mergedRefs = useMemo(() => mergeRefs(props.modalRef, modalRef), [props.modalRef, modalRef]);
 
   let ref = useObjectRef(mergedRefs);
-  let entering = useEnterAnimation(ref);
+  let entering = useEnterAnimation(ref, isOpen);
   let renderProps = useRenderProps({
     ...props,
     defaultClassName: 'react-aria-Modal',
@@ -315,15 +327,40 @@ function ModalContent(props: ModalContentProps) {
     }
   });
 
+  // Hide the modal initially, since an auto-focused input may cause a viewport resize in the next frame.
+  // If so, delay the reveal by another frame to avoid layout shift when the viewport settles.
+  useLayoutEffect(() => {
+    let frame: number, frame2: number;
+
+    frame = requestAnimationFrame(() => {
+      let activeElement = getActiveElement();
+      if (activeElement && willOpenKeyboard(activeElement)) {
+        frame2 = requestAnimationFrame(() => setOpen(true));
+      } else {
+        setOpen(true);
+      }
+    });
+
+    return () => {
+      cancelAnimationFrame(frame);
+      cancelAnimationFrame(frame2);
+    };
+  }, []);
+
+  let {visuallyHiddenProps} = useVisuallyHidden();
+  let contentStyle = isOpen ? {display: 'contents'} : visuallyHiddenProps.style;
+
   return (
-    <dom.div
-      {...mergeProps(filterDOMProps(props, {global: true}), modalProps)}
-      {...renderProps}
-      ref={ref}
-      data-entering={entering || undefined}
-      data-exiting={isExiting || undefined}>
-      {isDismissable && <DismissButton onDismiss={state.close} />}
-      {renderProps.children}
+    <dom.div style={contentStyle}>
+      <dom.div
+        {...mergeProps(filterDOMProps(props, {global: true}), modalProps)}
+        {...renderProps}
+        ref={ref}
+        data-entering={entering || undefined}
+        data-exiting={isExiting || undefined}>
+        {isDismissable && <DismissButton onDismiss={state.close} />}
+        {renderProps.children}
+      </dom.div>
     </dom.div>
   );
 }
diff --git a/packages/react-aria/src/overlays/usePreventScroll.ts b/packages/react-aria/src/overlays/usePreventScroll.ts
index 6ed499570d6..1366f1c9c79 100644
--- a/packages/react-aria/src/overlays/usePreventScroll.ts
+++ b/packages/react-aria/src/overlays/usePreventScroll.ts
@@ -11,11 +11,10 @@
  */
 
 import {chain} from '../utils/chain';
-
 import {getActiveElement, getEventTarget} from '../utils/shadowdom/DOMFunctions';
 import {getNonce} from '../utils/getNonce';
 import {getScrollParent} from '../utils/getScrollParent';
-import {isIOS} from '../utils/platform';
+import {isIOS, isWebKit} from '../utils/platform';
 import {isScrollable} from '../utils/isScrollable';
 import {useLayoutEffect} from '../utils/useLayoutEffect';
 import {willOpenKeyboard} from '../utils/keyboard';
@@ -36,6 +35,9 @@ let restore;
  * restores it on unmount. Also ensures that content does not
  * shift due to the scrollbars disappearing.
  */
+// TODO(Docs): Fixed outdated documentation of IOS Safari scroll prevention.
+// TODO(Docs): Fixed crash when attempting to override focus in test scenarios.
+// TODO(Docs): Fixed platform detection causing IOS Safari prevention to run in other engines.
 export function usePreventScroll(options: PreventScrollOptions = {}): void {
   let {isDisabled} = options;
 
@@ -46,7 +48,7 @@ export function usePreventScroll(options: PreventScrollOptions = {}): void {
 
     preventScrollCount++;
     if (preventScrollCount === 1) {
-      if (isIOS()) {
+      if (isIOS() && isWebKit()) {
         restore = preventScrollMobileSafari();
       } else {
         restore = preventScrollStandard();
@@ -197,18 +199,22 @@ function preventScrollMobileSafari() {
 
   // Override programmatic focus to scroll into view without scrolling the whole page.
   let focus = HTMLElement.prototype.focus;
-  HTMLElement.prototype.focus = function (opts) {
-    // Track whether the keyboard was already visible before.
-    let activeElement = getActiveElement();
-    let wasKeyboardVisible = activeElement != null && willOpenKeyboard(activeElement);
-
-    // Focus the element without scrolling the page.
-    focus.call(this, {...opts, preventScroll: true});
-
-    if (!opts || !opts.preventScroll) {
-      scrollIntoViewWhenReady(this, wasKeyboardVisible);
+  Reflect.defineProperty(HTMLElement.prototype, 'focus', {
+    configurable: true,
+    writable: true,
+    value: function (opts?: FocusOptions) {
+      // Track whether the keyboard was already visible before.
+      let activeElement = getActiveElement();
+      let wasKeyboardVisible = activeElement != null && willOpenKeyboard(activeElement);
+
+      // Focus the element without scrolling the page.
+      focus.call(this, {...opts, preventScroll: true});
+
+      if (!opts || !opts.preventScroll) {
+        scrollIntoViewWhenReady(this, wasKeyboardVisible);
+      }
     }
-  };
+  });
 
   let removeEvents = chain(
     addEvent(document, 'touchstart', onTouchStart, {passive: false, capture: true}),
@@ -220,7 +226,11 @@ function preventScrollMobileSafari() {
     restoreOverflow();
     removeEvents();
     style.remove();
-    HTMLElement.prototype.focus = focus;
+    Reflect.defineProperty(HTMLElement.prototype, 'focus', {
+      configurable: true,
+      writable: true,
+      value: focus
+    });
   };
 }
 

From 64a2d762d0ba561ea601ae2089c10b89b2792c75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?=
 <nikolas.schroeter@widynski.technology>
Date: Mon, 25 May 2026 18:09:56 +0200
Subject: [PATCH 2/7] chore: remove comments

---
 packages/react-aria/src/overlays/usePreventScroll.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/react-aria/src/overlays/usePreventScroll.ts b/packages/react-aria/src/overlays/usePreventScroll.ts
index 1366f1c9c79..69cc0c8ae52 100644
--- a/packages/react-aria/src/overlays/usePreventScroll.ts
+++ b/packages/react-aria/src/overlays/usePreventScroll.ts
@@ -35,9 +35,6 @@ let restore;
  * restores it on unmount. Also ensures that content does not
  * shift due to the scrollbars disappearing.
  */
-// TODO(Docs): Fixed outdated documentation of IOS Safari scroll prevention.
-// TODO(Docs): Fixed crash when attempting to override focus in test scenarios.
-// TODO(Docs): Fixed platform detection causing IOS Safari prevention to run in other engines.
 export function usePreventScroll(options: PreventScrollOptions = {}): void {
   let {isDisabled} = options;
 

From 8bf7085901702c9dcd45e52a9d7d930c34a21d4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?=
 <nikolas.schroeter@widynski.technology>
Date: Mon, 25 May 2026 18:29:33 +0200
Subject: [PATCH 3/7] chore: lint

---
 packages/react-aria-components/src/Modal.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-aria-components/src/Modal.tsx b/packages/react-aria-components/src/Modal.tsx
index 2d918a5763a..811d4c36581 100644
--- a/packages/react-aria-components/src/Modal.tsx
+++ b/packages/react-aria-components/src/Modal.tsx
@@ -11,8 +11,6 @@
  */
 
 import {AriaModalOverlayProps, useModalOverlay} from 'react-aria/useModalOverlay';
-import {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';
-import {willOpenKeyboard} from 'react-aria/private/utils/keyboard';
 import {
   ClassNameOrFunction,
   ContextValue,
@@ -26,6 +24,7 @@ import {
 import {DismissButton, Overlay} from 'react-aria/Overlay';
 import {DOMAttributes, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
 import {filterDOMProps} from 'react-aria/filterDOMProps';
+import {getActiveElement} from 'react-aria/private/utils/shadowdom/DOMFunctions';
 import {isScrollable} from 'react-aria/private/utils/isScrollable';
 import {mergeProps} from 'react-aria/mergeProps';
 import {mergeRefs} from 'react-aria/mergeRefs';
@@ -46,10 +45,11 @@ import React, {
 } from 'react';
 import {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';
 import {useIsSSR} from 'react-aria/SSRProvider';
+import {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';
 import {useObjectRef} from 'react-aria/useObjectRef';
 import {useViewportSize} from 'react-aria/private/utils/useViewportSize';
-import {getActiveElement} from 'react-aria/private/utils/shadowdom/DOMFunctions';
 import {useVisuallyHidden} from 'react-aria/VisuallyHidden';
+import {willOpenKeyboard} from 'react-aria/private/utils/keyboard';
 
 export interface ModalOverlayProps
   extends

From 522b02e32e01bbe759ab3ede20d5ae841149c42c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?=
 <nikolas.schroeter@widynski.technology>
Date: Wed, 10 Jun 2026 02:15:02 +0200
Subject: [PATCH 4/7] feat: generic keyboard observation and transition hooks

---
 .../docs/pages/react-aria/getting-started.mdx |   4 +
 .../docs/pages/react-aria/home/ExampleApp.tsx |   3 +-
 packages/react-aria-components/docs/Modal.mdx |   4 +
 .../react-aria-components/docs/Popover.mdx    |   8 +
 .../docs/examples/command-palette.mdx         |   3 +-
 .../docs/examples/destructive-dialog.mdx      |   3 +-
 .../react-aria-components/docs/styling.mdx    |  12 ++
 packages/react-aria-components/src/Modal.tsx  |  84 ++++-----
 .../react-aria-components/src/Popover.tsx     |  19 ++-
 .../exports/private/utils/runAfterKeyboard.ts |   1 +
 .../src/overlays/calculatePosition.ts         |   5 +-
 packages/react-aria/src/utils/domHelpers.ts   |  85 ++++++++--
 packages/react-aria/src/utils/keyboard.tsx    | 134 ++++++++++++---
 packages/react-aria/src/utils/platform.ts     |   6 +-
 .../react-aria/src/utils/runAfterKeyboard.ts  | 159 ++++++++++++++++++
 .../src/utils/runAfterTransition.ts           | 143 +++++++++-------
 packages/react-aria/src/utils/useEvent.ts     |  44 +++--
 .../react-aria/src/utils/useViewportSize.ts   |  33 ++--
 starters/docs/src/Modal.css                   |   4 +
 starters/docs/src/Popover.css                 |   4 +
 starters/tailwind/src/Modal.tsx               |   4 +-
 21 files changed, 585 insertions(+), 177 deletions(-)
 create mode 100644 packages/react-aria/exports/private/utils/runAfterKeyboard.ts
 create mode 100644 packages/react-aria/src/utils/runAfterKeyboard.ts

diff --git a/packages/dev/docs/pages/react-aria/getting-started.mdx b/packages/dev/docs/pages/react-aria/getting-started.mdx
index e7a3eb88af8..f94e5fba948 100644
--- a/packages/dev/docs/pages/react-aria/getting-started.mdx
+++ b/packages/dev/docs/pages/react-aria/getting-started.mdx
@@ -193,6 +193,10 @@ This is a quick way to get started, but you can also create your own custom clas
     --origin: translateY(-8px);
   }
 
+  &:not([data-open]) {
+    opacity: 0;
+  }
+
   &[data-entering] {
     animation: slide 200ms;
   }
diff --git a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
index c1fdf6b6a87..c3b9a2248a0 100644
--- a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
+++ b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
@@ -787,7 +787,7 @@ function PlantModal(props: ModalOverlayProps) {
       ${isEntering ? 'animate-in fade-in duration-200 ease-out' : ''}
       ${isExiting ? 'animate-out fade-out duration-200 ease-in' : ''}
     `}>
-      {({isEntering, isExiting}) => (
+      {({isEntering, isExiting, isOpen}) => (
         <>
           {/* Inner position: sticky div sized to the visual viewport
             height so the modal appears in view.
@@ -799,6 +799,7 @@ function PlantModal(props: ModalOverlayProps) {
               <div
                 data-react-aria-top-layer="true"
                 className={`absolute top-0 left-0 w-full h-(--visual-viewport-height) z-30 hidden sm:flex items-center justify-center pointer-events-none [filter:drop-shadow(0_0_3px_white)] dark:filter-none
+                ${!isOpen ? 'opacity-0' : ''}
                 ${isEntering ? 'animate-in zoom-in-105 ease-out duration-200' : ''}
                 ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
               `}>
diff --git a/packages/react-aria-components/docs/Modal.mdx b/packages/react-aria-components/docs/Modal.mdx
index d17bd684aad..ed45d8282cc 100644
--- a/packages/react-aria-components/docs/Modal.mdx
+++ b/packages/react-aria-components/docs/Modal.mdx
@@ -111,6 +111,10 @@ import {DialogTrigger, Modal, Dialog, Button, Heading, TextField, Label, Input}
   width: max-content;
   max-width: 300px;
 
+  &:not([data-open]) {
+    opacity: 0;
+  }
+
   &[data-entering] {
     animation: modal-zoom 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
diff --git a/packages/react-aria-components/docs/Popover.mdx b/packages/react-aria-components/docs/Popover.mdx
index 6fda2d02268..d648c8bbcca 100644
--- a/packages/react-aria-components/docs/Popover.mdx
+++ b/packages/react-aria-components/docs/Popover.mdx
@@ -100,6 +100,10 @@ import {DialogTrigger, Popover, Dialog, Button, OverlayArrow, Heading, Switch} f
     stroke-width: 1px;
   }
 
+  &:not([data-open]) {
+    opacity: 0;
+  }
+
   &[data-entering],
   &[data-exiting] {
     transform: var(--starting-scale) var(--origin);
@@ -447,6 +451,10 @@ Popovers also support entry and exit animations via states exposed as data attri
   transition: opacity 300ms, scale 300ms;
   transform-origin: var(--trigger-anchor-point);
 
+  &:not([data-open]) {
+    opacity: 0;
+  }
+
   &[data-entering],
   &[data-exiting] {
     opacity: 0;
diff --git a/packages/react-aria-components/docs/examples/command-palette.mdx b/packages/react-aria-components/docs/examples/command-palette.mdx
index 7f737fda4f4..331ec6a883b 100644
--- a/packages/react-aria-components/docs/examples/command-palette.mdx
+++ b/packages/react-aria-components/docs/examples/command-palette.mdx
@@ -108,7 +108,8 @@ function CommandPaletteExample() {
         >
           <div className="sticky top-0 left-0 w-full h-(--visual-viewport-height) flex items-start sm:items-center justify-center p-4 box-border text-center">
             <Modal
-              className={({ isEntering, isExiting }) => `
+              className={({ isEntering, isExiting, isOpen }) => `
+              ${!isOpen ? 'opacity-0' : ''}
               ${isEntering ? 'animate-in zoom-in-95 ease-out duration-300' : ''}
               ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
             `}
diff --git a/packages/react-aria-components/docs/examples/destructive-dialog.mdx b/packages/react-aria-components/docs/examples/destructive-dialog.mdx
index af2ca11b8bc..94978b9c46c 100644
--- a/packages/react-aria-components/docs/examples/destructive-dialog.mdx
+++ b/packages/react-aria-components/docs/examples/destructive-dialog.mdx
@@ -50,8 +50,9 @@ function ModalExample() {
           ${isEntering ? 'animate-in fade-in duration-300 ease-out' : ''}
           ${isExiting ? 'animate-out fade-out duration-200 ease-in' : ''}
         `}>
-          <Modal className={({isEntering, isExiting}) => `
+          <Modal className={({isEntering, isExiting, isOpen}) => `
             sticky top-0 left-0 w-full h-(--visual-viewport-height) flex items-center justify-center p-4 box-border text-center
+            ${!isOpen ? 'opacity-0' : ''}
             ${isEntering ? 'animate-in zoom-in-95 ease-out duration-300' : ''}
             ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
           `}>
diff --git a/packages/react-aria-components/docs/styling.mdx b/packages/react-aria-components/docs/styling.mdx
index b78753b7043..f83d33e46fd 100644
--- a/packages/react-aria-components/docs/styling.mdx
+++ b/packages/react-aria-components/docs/styling.mdx
@@ -281,6 +281,10 @@ Overlay components such as [Popover](Popover.html) and [Modal](Modal.html) suppo
 .react-aria-Popover {
   transition: opacity 300ms;
 
+  &:not([data-open]) {
+    opacity: 0;
+  }
+
   &[data-entering],
   &[data-exiting] {
     opacity: 0;
@@ -295,6 +299,10 @@ Note that the `[data-entering]` state is only applied for one frame when using C
   /* entry transition */
   transition: transform 300ms, opacity 300ms;
 
+  &:not([data-open]) {
+    opacity: 0;
+  }
+
   /* starting state of the entry transition */
   &[data-entering] {
     opacity: 0;
@@ -315,6 +323,10 @@ Note that the `[data-entering]` state is only applied for one frame when using C
 For more complex animations, you can also apply CSS keyframe animations using the same `[data-entering]` and `[data-exiting]` states.
 
 ```css render=false
+.react-aria-Popover:not([data-open]) {
+  opacity: 0;
+}
+
 .react-aria-Popover[data-entering] {
   animation: slide 300ms;
 }
diff --git a/packages/react-aria-components/src/Modal.tsx b/packages/react-aria-components/src/Modal.tsx
index 811d4c36581..ecc7fdb8211 100644
--- a/packages/react-aria-components/src/Modal.tsx
+++ b/packages/react-aria-components/src/Modal.tsx
@@ -24,7 +24,6 @@ import {
 import {DismissButton, Overlay} from 'react-aria/Overlay';
 import {DOMAttributes, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
 import {filterDOMProps} from 'react-aria/filterDOMProps';
-import {getActiveElement} from 'react-aria/private/utils/shadowdom/DOMFunctions';
 import {isScrollable} from 'react-aria/private/utils/isScrollable';
 import {mergeProps} from 'react-aria/mergeProps';
 import {mergeRefs} from 'react-aria/mergeRefs';
@@ -43,13 +42,12 @@ import React, {
   useRef,
   useState
 } from 'react';
+import {runAfterKeyboard} from 'react-aria/private/utils/runAfterKeyboard';
 import {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';
 import {useIsSSR} from 'react-aria/SSRProvider';
 import {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';
 import {useObjectRef} from 'react-aria/useObjectRef';
 import {useViewportSize} from 'react-aria/private/utils/useViewportSize';
-import {useVisuallyHidden} from 'react-aria/VisuallyHidden';
-import {willOpenKeyboard} from 'react-aria/private/utils/keyboard';
 
 export interface ModalOverlayProps
   extends
@@ -86,6 +84,7 @@ export interface ModalOverlayProps
 interface InternalModalContextValue {
   modalProps: DOMAttributes;
   modalRef: RefObject<HTMLDivElement | null>;
+  isOpen: boolean;
   isExiting: boolean;
   isDismissable?: boolean;
 }
@@ -94,6 +93,12 @@ export const ModalContext = createContext<ContextValue<ModalOverlayProps, HTMLDi
 const InternalModalContext = createContext<InternalModalContextValue | null>(null);
 
 export interface ModalRenderProps {
+  /**
+   * Whether the modal is ready to be displayed. Use this to avoid layout shift.
+   *
+   * @selector [data-open]
+   */
+  isOpen: boolean;
   /**
    * Whether the modal is currently entering. Use this to apply animations.
    *
@@ -240,11 +245,14 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
   let {state} = props;
   let {modalProps, underlayProps} = useModalOverlay(props, state, modalRef);
 
-  let entering = useEnterAnimation(props.overlayRef) || props.isEntering || false;
+  let unmountRef = useRef(false);
+  let [isOpen, setIsOpen] = useState(false);
+  let entering = useEnterAnimation(props.overlayRef, isOpen) || props.isEntering || false;
   let renderProps = useRenderProps({
     ...props,
     defaultClassName: 'react-aria-ModalOverlay',
     values: {
+      isOpen,
       isEntering: entering,
       isExiting: props.isExiting,
       state
@@ -273,6 +281,19 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
     '--page-height': pageHeight !== undefined ? pageHeight + 'px' : undefined
   };
 
+  // Since an auto-focused input may open the OSK, we defer the reveal, as a courtesy, to avoid layout shift.
+  // TODO: This can cause native focus scroll-into-view to abort, so we might want to do that manually?
+  useLayoutEffect(() => {
+    runAfterKeyboard(() => {
+      if (unmountRef.current) return;
+      setIsOpen(true);
+    });
+
+    return () => {
+      unmountRef.current = true;
+    };
+  }, []);
+
   return (
     <Overlay isExiting={props.isExiting} portalContainer={UNSTABLE_portalContainer}>
       <dom.div
@@ -280,13 +301,20 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
         {...renderProps}
         style={style}
         ref={props.overlayRef}
+        data-open={isOpen || undefined}
         data-entering={entering || undefined}
         data-exiting={props.isExiting || undefined}>
         <Provider
           values={[
             [
               InternalModalContext,
-              {modalProps, modalRef, isExiting: props.isExiting, isDismissable: props.isDismissable}
+              {
+                modalProps,
+                modalRef,
+                isExiting: props.isExiting,
+                isOpen,
+                isDismissable: props.isDismissable
+              }
             ],
             [OverlayTriggerStateContext, state]
           ]}>
@@ -310,8 +338,7 @@ interface ModalContentProps
 }
 
 function ModalContent(props: ModalContentProps) {
-  let {modalProps, modalRef, isExiting, isDismissable} = useContext(InternalModalContext)!;
-  let [isOpen, setOpen] = useState(false);
+  let {modalProps, modalRef, isExiting, isOpen, isDismissable} = useContext(InternalModalContext)!;
   let state = useContext(OverlayTriggerStateContext)!;
   let mergedRefs = useMemo(() => mergeRefs(props.modalRef, modalRef), [props.modalRef, modalRef]);
 
@@ -321,46 +348,23 @@ function ModalContent(props: ModalContentProps) {
     ...props,
     defaultClassName: 'react-aria-Modal',
     values: {
+      isOpen,
       isEntering: entering,
       isExiting,
       state
     }
   });
 
-  // Hide the modal initially, since an auto-focused input may cause a viewport resize in the next frame.
-  // If so, delay the reveal by another frame to avoid layout shift when the viewport settles.
-  useLayoutEffect(() => {
-    let frame: number, frame2: number;
-
-    frame = requestAnimationFrame(() => {
-      let activeElement = getActiveElement();
-      if (activeElement && willOpenKeyboard(activeElement)) {
-        frame2 = requestAnimationFrame(() => setOpen(true));
-      } else {
-        setOpen(true);
-      }
-    });
-
-    return () => {
-      cancelAnimationFrame(frame);
-      cancelAnimationFrame(frame2);
-    };
-  }, []);
-
-  let {visuallyHiddenProps} = useVisuallyHidden();
-  let contentStyle = isOpen ? {display: 'contents'} : visuallyHiddenProps.style;
-
   return (
-    <dom.div style={contentStyle}>
-      <dom.div
-        {...mergeProps(filterDOMProps(props, {global: true}), modalProps)}
-        {...renderProps}
-        ref={ref}
-        data-entering={entering || undefined}
-        data-exiting={isExiting || undefined}>
-        {isDismissable && <DismissButton onDismiss={state.close} />}
-        {renderProps.children}
-      </dom.div>
+    <dom.div
+      {...mergeProps(filterDOMProps(props, {global: true}), modalProps)}
+      {...renderProps}
+      ref={ref}
+      data-open={isOpen || undefined}
+      data-entering={entering || undefined}
+      data-exiting={isExiting || undefined}>
+      {isDismissable && <DismissButton onDismiss={state.close} />}
+      {renderProps.children}
     </dom.div>
   );
 }
diff --git a/packages/react-aria-components/src/Popover.tsx b/packages/react-aria-components/src/Popover.tsx
index 8284bdaa844..733d94b9227 100644
--- a/packages/react-aria-components/src/Popover.tsx
+++ b/packages/react-aria-components/src/Popover.tsx
@@ -52,6 +52,7 @@ import React, {
   useRef,
   useState
 } from 'react';
+import {runAfterKeyboard} from 'react-aria/private/utils/runAfterKeyboard';
 import {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';
 import {useIsHidden} from 'react-aria/private/collections/Hidden';
 import {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';
@@ -220,6 +221,8 @@ function PopoverInner({
   let containerRef = useRef<HTMLDivElement | null>(null);
   let groupCtx = useContext(PopoverGroupContext);
   let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';
+  let unmountRef = useRef(false);
+  let [isOpen, setIsOpen] = useState(false);
 
   let {popoverProps, underlayProps, arrowProps, placement, triggerAnchorPoint} = usePopover(
     {
@@ -234,7 +237,7 @@ function PopoverInner({
   );
 
   let ref = props.popoverRef as RefObject<HTMLDivElement | null>;
-  let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;
+  let isEntering = useEnterAnimation(ref, !!placement && isOpen) || props.isEntering || false;
   let renderProps = useRenderProps({
     ...props,
     defaultClassName: 'react-aria-Popover',
@@ -301,6 +304,19 @@ function PopoverInner({
     '--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth
   };
 
+  // Since an auto-focused input may open the OSK, we defer the reveal, as a courtesy, to avoid layout shift.
+  // TODO: This can cause native focus scroll-into-view to abort, so we might want to do that manually?
+  useLayoutEffect(() => {
+    runAfterKeyboard(() => {
+      if (unmountRef.current) return;
+      setIsOpen(true);
+    });
+
+    return () => {
+      unmountRef.current = true;
+    };
+  }, []);
+
   let overlay = (
     <dom.div
       {...mergeProps(filterDOMProps(props, {global: true}), popoverProps)}
@@ -315,6 +331,7 @@ function PopoverInner({
       dir={props.dir}
       data-trigger={props.trigger}
       data-placement={placement}
+      data-open={isOpen || undefined}
       data-entering={isEntering || undefined}
       data-exiting={isExiting || undefined}>
       {!props.isNonModal && <DismissButton onDismiss={state.close} />}
diff --git a/packages/react-aria/exports/private/utils/runAfterKeyboard.ts b/packages/react-aria/exports/private/utils/runAfterKeyboard.ts
new file mode 100644
index 00000000000..f827d09241e
--- /dev/null
+++ b/packages/react-aria/exports/private/utils/runAfterKeyboard.ts
@@ -0,0 +1 @@
+export {runAfterKeyboard, runAfterKeyboardTransition} from '../../../src/utils/runAfterKeyboard';
diff --git a/packages/react-aria/src/overlays/calculatePosition.ts b/packages/react-aria/src/overlays/calculatePosition.ts
index d103dfd48a3..10944298837 100644
--- a/packages/react-aria/src/overlays/calculatePosition.ts
+++ b/packages/react-aria/src/overlays/calculatePosition.ts
@@ -336,8 +336,9 @@ function getMaxHeight(
     (position.top != null
       ? position.top
       : containerDimensions[TOTAL_SIZE.height] - (position.bottom ?? 0) - overlayHeight) -
-    (containerDimensions.scroll.top ?? 0);
-  // calculate the dimentions of the "boundingRect" which is most restrictive top/bottom of the boundaryRect and the visual view port
+    (containerDimensions.scroll.top ?? 0) +
+    (visualViewport?.offsetTop ?? 0);
+  // calculate the dimensions of the "boundingRect" which is most restrictive top/bottom of the boundaryRect and the visual view port
   let boundaryToContainerTransformOffset = isContainerDescendentOfBoundary
     ? containerOffsetWithBoundary.top
     : 0;
diff --git a/packages/react-aria/src/utils/domHelpers.ts b/packages/react-aria/src/utils/domHelpers.ts
index c0fe8198dd8..d041c289372 100644
--- a/packages/react-aria/src/utils/domHelpers.ts
+++ b/packages/react-aria/src/utils/domHelpers.ts
@@ -1,23 +1,47 @@
-export const getOwnerDocument = (el: Element | null | undefined): Document => {
-  return el?.ownerDocument ?? document;
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export const getOwnerDocument = (target?: EventTarget | null): Document => {
+  if (isWindow(target)) return target.document;
+
+  // @ts-expect-error Ensure safe access in SSR environments.
+  return target?.ownerDocument ?? (typeof document !== 'undefined' ? document : undefined);
 };
 
-export const getOwnerWindow = (
-  el: (Window & typeof globalThis) | Element | null | undefined
-): Window & typeof globalThis => {
-  if (el && 'window' in el && el.window === el) {
-    return el;
-  }
+export const getOwnerWindow = (el?: EventTarget | null): Window & typeof globalThis => {
+  let ownerDocument = getOwnerDocument(el);
 
-  const doc = getOwnerDocument(el as Element | null | undefined);
-  return doc.defaultView || window;
+  // @ts-expect-error Ensure safe access in SSR environments.
+  return ownerDocument?.defaultView ?? (typeof window !== 'undefined' ? window : undefined);
+};
+
+export const getOwnerViewport = (el?: EventTarget | null): VisualViewport | null => {
+  let ownerWindow = getOwnerWindow(el);
+
+  return ownerWindow?.visualViewport ?? null;
+};
+
+export const getOwnerRootElement = (el?: EventTarget | null): HTMLElement => {
+  let ownerDocument = getOwnerDocument(el);
+  let scrollingElement = ownerDocument?.scrollingElement as HTMLElement;
+
+  return scrollingElement ?? ownerDocument?.documentElement;
 };
 
 /**
  * Type guard that checks if a value is a Node. Verifies the presence and type of the nodeType
  * property.
  */
-function isNode(value: unknown): value is Node {
+export function isNode(value?: unknown): value is Node {
   return (
     value !== null &&
     typeof value === 'object' &&
@@ -25,10 +49,43 @@ function isNode(value: unknown): value is Node {
     typeof (value as Node).nodeType === 'number'
   );
 }
+
+/**
+ * Type guard that checks if a value is an Element. Uses window self reference checks to
+ * distinguish Window from other values.
+ */
+export function isWindow(value?: unknown): value is Window & typeof globalThis {
+  return typeof value === 'object' && value != null && 'window' in value && value.window === value;
+}
+
+/**
+ * Type guard that checks if a value is an Element. Uses nodeType and tagName property checks to
+ * distinguish Element from other ElementNodes.
+ */
+export function isElement(value?: unknown): value is Element {
+  return isNode(value) && value.nodeType === Node.ELEMENT_NODE && 'tagName' in value;
+}
+
+/**
+ * Type guard that checks if a value is an HTMLElement. Uses prototype checks to
+ * distinguish Element from other Elements.
+ */
+export function isHTMLElement(value?: unknown): value is HTMLElement {
+  return isElement(value) && value instanceof getOwnerWindow(value).HTMLElement;
+}
+
+/**
+ * Type guard that checks if a value is an SVGElement. Uses prototype checks to
+ * distinguish SVGElement from other Elements.
+ */
+export function isSVGElement(value?: unknown): value is SVGElement {
+  return isElement(value) && value instanceof getOwnerWindow(value).SVGAElement;
+}
+
 /**
- * Type guard that checks if a node is a ShadowRoot. Uses nodeType and host property checks to
+ * Type guard that checks if a value is a ShadowRoot. Uses nodeType and host property checks to
  * distinguish ShadowRoot from other DocumentFragments.
  */
-export function isShadowRoot(node: Node | null): node is ShadowRoot {
-  return isNode(node) && node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && 'host' in node;
+export function isShadowRoot(value?: unknown): value is ShadowRoot {
+  return isNode(value) && value.nodeType === Node.DOCUMENT_FRAGMENT_NODE && 'host' in value;
 }
diff --git a/packages/react-aria/src/utils/keyboard.tsx b/packages/react-aria/src/utils/keyboard.tsx
index f0f8bd4ea88..8c2200248d1 100644
--- a/packages/react-aria/src/utils/keyboard.tsx
+++ b/packages/react-aria/src/utils/keyboard.tsx
@@ -10,21 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {isMac} from './platform';
+import {addEvent} from './useEvent';
+import {getActiveElement, getEventTarget} from './shadowdom/DOMFunctions';
+import {getOwnerDocument, getOwnerViewport, getOwnerWindow} from './domHelpers';
+import {isFirefox, isIOS, isMac} from './platform';
 
-interface Event {
-  altKey: boolean;
-  ctrlKey: boolean;
-  metaKey: boolean;
-}
-
-export function isCtrlKeyPressed(e: Event): boolean {
-  if (isMac()) {
-    return e.metaKey;
-  }
-
-  return e.ctrlKey;
-}
+// Tracks layout status of the on-screen keyboard.
+const cache = new WeakMap<EventTarget, KeyboardStatus>();
 
 // HTML input types that do not cause the software keyboard to appear.
 const nonTextInputTypes = new Set([
@@ -39,10 +31,112 @@ const nonTextInputTypes = new Set([
   'reset'
 ]);
 
-export function willOpenKeyboard(target: Element) {
-  return (
-    (target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
-    target instanceof HTMLTextAreaElement ||
-    (target instanceof HTMLElement && target.isContentEditable)
-  );
+interface KeyboardStatus {
+  isOpen: boolean;
+  innerHeight?: number;
+  resizeTimeStamp?: number;
+  resizeTimeout?: number;
+}
+
+interface KeyPressEvent {
+  altKey: boolean;
+  ctrlKey: boolean;
+  metaKey: boolean;
+}
+
+function onResize(e: Event): void {
+  let target = getEventTarget(e);
+  let ownerWindow = getOwnerWindow(target);
+
+  let status = cache.get(ownerWindow);
+  let timeStamp = Number(status?.resizeTimeStamp ?? 0);
+
+  if (status && timeStamp <= e.timeStamp + 50) {
+    status.resizeTimeStamp = e.timeStamp + 150;
+
+    ownerWindow.clearTimeout(status.resizeTimeout);
+
+    status.resizeTimeout = ownerWindow.setTimeout(() => {
+      status.isOpen = isKeyboardVisible();
+      delete status.resizeTimeout;
+      delete status.resizeTimeStamp;
+    }, 150);
+  }
+}
+
+function onIOSResize(e: Event): void {
+  let target = getEventTarget(e);
+  let ownerWindow = getOwnerWindow(target);
+
+  let status = cache.get(ownerWindow);
+
+  if (status) {
+    status.isOpen = isKeyboardVisible();
+  }
+}
+
+function setupGlobalEvents(): void {
+  let ownerWindow = getOwnerWindow();
+  let ownerViewport = getOwnerViewport();
+
+  let status: KeyboardStatus = {isOpen: false};
+
+  if (ownerWindow == null || ownerViewport == null) return;
+
+  // https://github.com/mozilla-mobile/firefox-ios/issues/33806
+  if (isIOS() && isFirefox()) {
+    status.innerHeight = ownerWindow.innerHeight;
+  }
+
+  addEvent(ownerViewport, 'resize', isIOS() ? onIOSResize : onResize);
+  cache.set(ownerWindow, status);
+}
+
+if (typeof document !== 'undefined') {
+  if (document.readyState !== 'loading') {
+    setupGlobalEvents();
+  } else {
+    addEvent(document, 'DOMContentLoaded', setupGlobalEvents);
+  }
+}
+
+export function willOpenKeyboard(target: EventTarget | null): boolean {
+  let isTextArea = target instanceof HTMLTextAreaElement;
+  let isEditable = target instanceof HTMLElement && target.isContentEditable;
+  let isTextInput = target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type);
+
+  return isTextArea || isEditable || isTextInput;
+}
+
+export function isCtrlKeyPressed(event: KeyPressEvent): boolean {
+  return isMac() ? event.metaKey : event.ctrlKey;
+}
+
+export function isKeyboardOpen(): boolean {
+  let ownerWindow = getOwnerWindow();
+  let ownerViewport = getOwnerViewport();
+
+  if (ownerWindow == null || ownerViewport == null) return false;
+
+  let status = cache.get(ownerWindow);
+
+  return !!status?.isOpen;
+}
+
+export function isKeyboardVisible(): boolean {
+  let ownerWindow = getOwnerWindow();
+  let ownerDocument = getOwnerDocument();
+  let ownerViewport = getOwnerViewport();
+
+  if (ownerWindow == null || ownerViewport == null) return false;
+
+  let status = cache.get(ownerWindow);
+
+  let activeElement = getActiveElement(ownerDocument);
+  let willKeyboardOpen = ownerDocument.hasFocus() && willOpenKeyboard(activeElement);
+
+  let minHeight = Number(ownerViewport?.height) * Number(ownerViewport?.scale);
+  let maxHeight = Number(status?.innerHeight) || Number(ownerWindow.innerHeight);
+
+  return (willKeyboardOpen || !!status?.isOpen) && maxHeight - minHeight > 150;
 }
diff --git a/packages/react-aria/src/utils/platform.ts b/packages/react-aria/src/utils/platform.ts
index 673368b737a..55a752ffd2d 100644
--- a/packages/react-aria/src/utils/platform.ts
+++ b/packages/react-aria/src/utils/platform.ts
@@ -67,11 +67,11 @@ export const isAppleDevice: () => boolean = cached(function () {
 });
 
 export const isWebKit: () => boolean = cached(function () {
-  return testUserAgent(/AppleWebKit/i) && !isChrome();
+  return testUserAgent(/AppleWebKit/i) && !isChrome() && !isFirefox();
 });
 
 export const isChrome: () => boolean = cached(function () {
-  return testUserAgent(/Chrome/i);
+  return testUserAgent(/Chrome|CriOS|CrMo/i);
 });
 
 export const isAndroid: () => boolean = cached(function () {
@@ -79,5 +79,5 @@ export const isAndroid: () => boolean = cached(function () {
 });
 
 export const isFirefox: () => boolean = cached(function () {
-  return testUserAgent(/Firefox/i);
+  return testUserAgent(/(Firefox|FxiOS)/i);
 });
diff --git a/packages/react-aria/src/utils/runAfterKeyboard.ts b/packages/react-aria/src/utils/runAfterKeyboard.ts
new file mode 100644
index 00000000000..f3b40d54430
--- /dev/null
+++ b/packages/react-aria/src/utils/runAfterKeyboard.ts
@@ -0,0 +1,159 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {getActiveElement} from './shadowdom/DOMFunctions';
+import {getOwnerDocument, getOwnerViewport, getOwnerWindow} from './domHelpers';
+import {isIOS, isWebKit} from './platform';
+import {isKeyboardOpen, isKeyboardVisible, willOpenKeyboard} from './keyboard';
+
+const intervalByWindow = new WeakMap<EventTarget, number | undefined>();
+const timeoutByWindow = new WeakMap<EventTarget, number | undefined>();
+const transitionCallbacks = new Set<QueuedCallback>();
+const resizeCallbacks = new Set<QueuedCallback>();
+
+interface QueuedCallback {
+  (isKeyboardOpen: boolean): void;
+}
+
+function onTransitionStart(): void {
+  let ownerWindow = getOwnerWindow();
+
+  let wasOpen = isKeyboardOpen();
+  let wasVisible = isKeyboardVisible();
+
+  let transitionTimeout = timeoutByWindow.get(ownerWindow);
+  let transitionInterval = intervalByWindow.get(ownerWindow);
+
+  let transitionTimer = isIOS() && isWebKit() && wasOpen ? 600 : 300;
+
+  if (transitionInterval != null && transitionTimeout != null) {
+    return;
+  }
+
+  transitionInterval = ownerWindow.setInterval(() => {
+    let isOpen = isKeyboardOpen();
+    let isVisible = isKeyboardVisible();
+
+    if (wasOpen !== isOpen) {
+      for (let callback of resizeCallbacks) {
+        callback(isKeyboardOpen());
+        resizeCallbacks.delete(callback);
+      }
+    }
+
+    if ((!isIOS() && wasVisible !== isVisible) || (wasVisible && !isVisible)) {
+      for (let callback of transitionCallbacks) {
+        callback(isKeyboardVisible());
+        transitionCallbacks.delete(callback);
+      }
+    }
+
+    if (!transitionCallbacks.size && !resizeCallbacks.size) {
+      onTransitionEnd();
+    }
+  }, 50);
+
+  transitionTimeout = ownerWindow.setTimeout(() => {
+    for (let callback of resizeCallbacks) {
+      callback(isKeyboardOpen());
+      resizeCallbacks.delete(callback);
+    }
+
+    for (let callback of transitionCallbacks) {
+      callback(isKeyboardVisible());
+      transitionCallbacks.delete(callback);
+    }
+
+    onTransitionEnd();
+  }, transitionTimer);
+
+  timeoutByWindow.set(ownerWindow, transitionTimeout);
+  intervalByWindow.set(ownerWindow, transitionInterval);
+}
+
+function onTransitionEnd(): void {
+  let ownerWindow = getOwnerWindow();
+
+  let transitionTimeout = timeoutByWindow.get(ownerWindow);
+  let transitionInterval = intervalByWindow.get(ownerWindow);
+
+  ownerWindow.clearTimeout(transitionTimeout);
+  ownerWindow.clearInterval(transitionInterval);
+
+  timeoutByWindow.delete(ownerWindow);
+  intervalByWindow.delete(ownerWindow);
+}
+
+/**
+ * Delays a callback execution until a keyboard transition may no longer impact layout.
+ * Guarantees an invocation if an expected transition did not finish within 300ms.
+ */
+export function runAfterKeyboard(fn: QueuedCallback): void {
+  let ownerWindow = getOwnerWindow();
+  let ownerDocument = getOwnerDocument();
+  let ownerViewport = getOwnerViewport();
+
+  if (ownerViewport == null) return fn(false);
+
+  // Assert based on geometry rather than focus to support intermediate states, in which
+  // document.activeElement can't be used to reliably infer the open state of the OSK.
+  let wasKeyboardOpen = isKeyboardOpen();
+
+  // Wait one frame to see if focus lands on an input.
+  ownerWindow.requestAnimationFrame(() => {
+    let activeElement = getActiveElement(ownerDocument);
+    let willKeyboardOpen = ownerDocument.hasFocus() && willOpenKeyboard(activeElement);
+
+    // If keyboard won't change, call the function immediately.
+    if (wasKeyboardOpen === willKeyboardOpen) {
+      return fn(willKeyboardOpen);
+    }
+
+    // On close, fire immediately since consumers may assert the ICB.
+    if (wasKeyboardOpen && !willKeyboardOpen) {
+      return fn(willKeyboardOpen);
+    }
+
+    resizeCallbacks.add(fn);
+    onTransitionStart();
+  });
+}
+
+/**
+ * Delays a callback execution until the on-screen keyboard has finished its transition.
+ * Guarantees an invocation if an expected transition did not finish within 600ms.
+ */
+export function runAfterKeyboardTransition(fn: QueuedCallback): void {
+  let ownerWindow = getOwnerWindow();
+  let ownerDocument = getOwnerDocument();
+  let ownerViewport = getOwnerViewport();
+
+  if (ownerViewport == null) return fn(false);
+
+  // Assert based on geometry rather than focus to support intermediate states, in which
+  // document.activeElement can't be used to reliably infer the open state of the OSK.
+  let wasKeyboardOpen = isKeyboardOpen();
+
+  // Wait one frame to see if focus lands on an input.
+  ownerWindow.requestAnimationFrame(() => {
+    let activeElement = getActiveElement(ownerDocument);
+    let willKeyboardOpen = ownerDocument.hasFocus() && willOpenKeyboard(activeElement);
+
+    // If keyboard won't transition, fire immediately.
+    if (wasKeyboardOpen === willKeyboardOpen) {
+      return fn(willKeyboardOpen);
+    }
+
+    transitionCallbacks.add(fn);
+    onTransitionStart();
+  });
+}
diff --git a/packages/react-aria/src/utils/runAfterTransition.ts b/packages/react-aria/src/utils/runAfterTransition.ts
index 80e31fc112f..013c5f9e458 100644
--- a/packages/react-aria/src/utils/runAfterTransition.ts
+++ b/packages/react-aria/src/utils/runAfterTransition.ts
@@ -10,88 +10,87 @@
  * governing permissions and limitations under the License.
  */
 
+import {addEvent} from './useEvent';
+import {getEventTarget} from './shadowdom/DOMFunctions';
+import {getOwnerDocument, getOwnerWindow} from './domHelpers';
+
 // We store a global list of elements that are currently transitioning,
 // mapped to a set of CSS properties that are transitioning for that element.
 // This is necessary rather than a simple count of transitions because of browser
 // bugs, e.g. Chrome sometimes fires both transitionend and transitioncancel rather
 // than one or the other. So we need to track what's actually transitioning so that
 // we can ignore these duplicate events.
-import {getEventTarget} from './shadowdom/DOMFunctions';
-let transitionsByElement = new Map<EventTarget, Set<string>>();
+const transitionsByElement = new Map<EventTarget, Set<string>>();
+const transitionCallbacks = new Set<QueuedCallback>();
 
-// A list of callbacks to call once there are no transitioning elements.
-let transitionCallbacks = new Set<() => void>();
+interface QueuedCallback {
+  (isTransition: boolean): void;
+}
 
-function setupGlobalEvents() {
-  if (typeof window === 'undefined') {
+function isTransitionEvent(event: Event): event is TransitionEvent {
+  return 'propertyName' in event;
+}
+
+function onTransitionStart(e: Event) {
+  let eventTarget = getEventTarget(e);
+
+  if (!isTransitionEvent(e) || !eventTarget) {
     return;
   }
 
-  function isTransitionEvent(event: Event): event is TransitionEvent {
-    return 'propertyName' in event;
+  // Add the transitioning property to the list for this element.
+  let transitions = transitionsByElement.get(eventTarget);
+
+  if (!transitions) {
+    transitions = new Set();
+    transitionsByElement.set(eventTarget, transitions);
+
+    // The transitioncancel event must be registered on the element itself, rather than as a global
+    // event. This enables us to handle when the node is deleted from the document while it is transitioning.
+    // In that case, the cancel event would have nowhere to bubble to so we need to handle it directly.
+    eventTarget.addEventListener('transitioncancel', onTransitionEnd, {once: true});
   }
 
-  let onTransitionStart = (e: Event) => {
-    let eventTarget = getEventTarget(e);
-    if (!isTransitionEvent(e) || !eventTarget) {
-      return;
-    }
-    // Add the transitioning property to the list for this element.
-    let transitions = transitionsByElement.get(eventTarget);
-    if (!transitions) {
-      transitions = new Set();
-      transitionsByElement.set(eventTarget, transitions);
-
-      // The transitioncancel event must be registered on the element itself, rather than as a global
-      // event. This enables us to handle when the node is deleted from the document while it is transitioning.
-      // In that case, the cancel event would have nowhere to bubble to so we need to handle it directly.
-      eventTarget.addEventListener('transitioncancel', onTransitionEnd, {
-        once: true
-      });
-    }
+  transitions.add(e.propertyName);
+}
 
-    transitions.add(e.propertyName);
-  };
+function onTransitionEnd(e: Event) {
+  let eventTarget = getEventTarget(e);
+  let ownerDocument = getOwnerDocument(eventTarget);
 
-  let onTransitionEnd = (e: Event) => {
-    let eventTarget = getEventTarget(e);
-    if (!isTransitionEvent(e) || !eventTarget) {
-      return;
-    }
-    // Remove property from list of transitioning properties.
-    let properties = transitionsByElement.get(eventTarget);
-    if (!properties) {
-      return;
-    }
+  if (!isTransitionEvent(e) || !eventTarget) {
+    return;
+  }
 
-    properties.delete(e.propertyName);
+  // Remove property from list of transitioning properties.
+  let properties = transitionsByElement.get(eventTarget);
 
-    // If empty, remove transitioncancel event, and remove the element from the list of transitioning elements.
-    if (properties.size === 0) {
-      eventTarget.removeEventListener('transitioncancel', onTransitionEnd);
-      transitionsByElement.delete(eventTarget);
-    }
+  if (!properties) {
+    return;
+  }
 
-    // If no transitioning elements, call all of the queued callbacks.
-    if (transitionsByElement.size === 0) {
-      for (let cb of transitionCallbacks) {
-        cb();
-      }
+  properties.delete(e.propertyName);
 
-      transitionCallbacks.clear();
-    }
-  };
+  // If empty, remove transitioncancel event, and remove the element from the list of transitioning elements.
+  if (properties.size === 0) {
+    eventTarget.removeEventListener('transitioncancel', onTransitionEnd);
+    transitionsByElement.delete(eventTarget);
+  }
 
-  document.body.addEventListener('transitionrun', onTransitionStart);
-  document.body.addEventListener('transitionend', onTransitionEnd);
+  // If no transitioning elements, call all of the queued callbacks.
+  if (transitionsByElement.size === 0) {
+    for (let callback of transitionCallbacks) {
+      callback(true);
+      transitionCallbacks.delete(callback);
+    }
+  }
 }
 
-if (typeof document !== 'undefined') {
-  if (document.readyState !== 'loading') {
-    setupGlobalEvents();
-  } else {
-    document.addEventListener('DOMContentLoaded', setupGlobalEvents);
-  }
+function setupGlobalEvents() {
+  let ownerDocument = getOwnerDocument();
+
+  addEvent(ownerDocument, 'transitionrun', onTransitionStart);
+  addEvent(ownerDocument, 'transitionend', onTransitionEnd);
 }
 
 /**
@@ -109,16 +108,30 @@ function cleanupDetachedElements() {
   }
 }
 
-export function runAfterTransition(fn: () => void): void {
+if (typeof document !== 'undefined') {
+  if (document.readyState !== 'loading') {
+    setupGlobalEvents();
+  } else {
+    addEvent(document, 'DOMContentLoaded', setupGlobalEvents);
+  }
+}
+
+/**
+ * Delays a callback execution until all elements finished their transition.
+ */
+export function runAfterTransition(fn: QueuedCallback): void {
+  let ownerWindow = getOwnerWindow();
+
   // Wait one frame to see if an animation starts, e.g. a transition on mount.
-  requestAnimationFrame(() => {
+  ownerWindow.requestAnimationFrame(() => {
     cleanupDetachedElements();
+
     // If no transitions are running, call the function immediately.
     // Otherwise, add it to a list of callbacks to run at the end of the animation.
     if (transitionsByElement.size === 0) {
-      fn();
-    } else {
-      transitionCallbacks.add(fn);
+      return fn(false);
     }
+
+    transitionCallbacks.add(fn);
   });
 }
diff --git a/packages/react-aria/src/utils/useEvent.ts b/packages/react-aria/src/utils/useEvent.ts
index 1dd35499847..fa32eff78c0 100644
--- a/packages/react-aria/src/utils/useEvent.ts
+++ b/packages/react-aria/src/utils/useEvent.ts
@@ -14,24 +14,44 @@ import {RefObject} from '@react-types/shared';
 import {useEffect} from 'react';
 import {useEffectEvent} from './useEffectEvent';
 
-export function useEvent<K extends keyof GlobalEventHandlersEventMap>(
-  ref: RefObject<EventTarget | null>,
-  event: K | (string & {}),
-  handler?: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,
+type EventHandlerMap<T extends EventTarget> = T extends Window
+  ? WindowEventMap
+  : T extends Document
+    ? DocumentEventMap
+    : T extends Element
+      ? HTMLElementEventMap
+      : T extends VisualViewport
+        ? VisualViewportEventMap
+        : GlobalEventHandlersEventMap;
+
+export function useEvent<T extends EventTarget, K extends keyof EventHandlerMap<T>>(
+  ref: RefObject<T | null>,
+  event: Extract<K, string> | (string & {}),
+  listener?: (this: T, ev: EventHandlerMap<Exclude<T, null>>[K]) => any,
   options?: boolean | AddEventListenerOptions
 ): void {
-  let handleEvent = useEffectEvent(handler);
-  let isDisabled = handler == null;
+  let handleEvent = useEffectEvent(listener);
+  let isDisabled = listener == null;
 
   useEffect(() => {
-    if (isDisabled || !ref.current) {
+    if (isDisabled || ref.current == null) {
       return;
     }
 
-    let element = ref.current;
-    element.addEventListener(event, handleEvent as EventListener, options);
-    return () => {
-      element.removeEventListener(event, handleEvent as EventListener, options);
-    };
+    return addEvent(ref.current, event, handleEvent, options);
   }, [ref, event, options, isDisabled]);
 }
+
+export function addEvent<T extends EventTarget, K extends keyof EventHandlerMap<Exclude<T, null>>>(
+  target: T | null,
+  event: Extract<K, string> | (string & {}),
+  listener?: (this: T, ev: EventHandlerMap<Exclude<T, null>>[K]) => any,
+  options?: boolean | AddEventListenerOptions
+): () => void {
+  if (listener == null || target == null) {
+    return () => {};
+  }
+
+  target.addEventListener(event, listener as EventListener, options);
+  return () => target.removeEventListener(event, listener as EventListener, options);
+}
diff --git a/packages/react-aria/src/utils/useViewportSize.ts b/packages/react-aria/src/utils/useViewportSize.ts
index 6ff0c4f7d94..66c7027c098 100644
--- a/packages/react-aria/src/utils/useViewportSize.ts
+++ b/packages/react-aria/src/utils/useViewportSize.ts
@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {getActiveElement, getEventTarget} from './shadowdom/DOMFunctions';
+import {getEventTarget} from './shadowdom/DOMFunctions';
 import {isIOS} from './platform';
-import {useEffect, useState} from 'react';
+import {runAfterKeyboard} from './runAfterKeyboard';
+import {useEffect, useRef, useState} from 'react';
 import {useIsSSR} from '../ssr/SSRProvider';
 import {willOpenKeyboard} from './keyboard';
 
@@ -25,10 +26,13 @@ let visualViewport = typeof document !== 'undefined' && window.visualViewport;
 
 export function useViewportSize(): ViewportSize {
   let isSSR = useIsSSR();
+  let unmountRef = useRef(false);
   let [size, setSize] = useState(() => (isSSR ? {width: 0, height: 0} : getViewportSize()));
 
   useEffect(() => {
     let updateSize = (newSize: ViewportSize) => {
+      if (unmountRef.current) return;
+
       setSize(size => {
         if (newSize.width === size.width && newSize.height === size.height) {
           return size;
@@ -49,24 +53,23 @@ export function useViewportSize(): ViewportSize {
 
     // When closing the keyboard, iOS does not fire the visual viewport resize event until the animation is complete.
     // We can anticipate this and resize early by handling the blur event and using the layout size.
-    let frame: number;
     let onBlur = (e: FocusEvent) => {
       if (visualViewport && visualViewport.scale > 1) {
         return;
       }
 
-      if (willOpenKeyboard(getEventTarget(e) as Element)) {
-        // Wait one frame to see if a new element gets focused.
-        frame = requestAnimationFrame(() => {
-          let activeElement = getActiveElement();
-          if (!activeElement || !willOpenKeyboard(activeElement)) {
-            updateSize({
-              width: document.documentElement.clientWidth,
-              height: document.documentElement.clientHeight
-            });
-          }
-        });
+      if (!willOpenKeyboard(getEventTarget(e))) {
+        return;
       }
+
+      runAfterKeyboard(isOpen => {
+        if (isOpen) return;
+
+        updateSize({
+          width: document.documentElement.clientWidth,
+          height: document.documentElement.clientHeight
+        });
+      });
     };
 
     updateSize(getViewportSize());
@@ -82,7 +85,7 @@ export function useViewportSize(): ViewportSize {
     }
 
     return () => {
-      cancelAnimationFrame(frame);
+      unmountRef.current = true;
       if (isIOS()) {
         window.removeEventListener('blur', onBlur, true);
       }
diff --git a/starters/docs/src/Modal.css b/starters/docs/src/Modal.css
index 9241945b5f3..c3472373a24 100644
--- a/starters/docs/src/Modal.css
+++ b/starters/docs/src/Modal.css
@@ -35,6 +35,10 @@
   width: max-content;
   max-width: min(500px, 90vw);
 
+  &:not([data-open]) {
+    opacity: 0;
+  }
+
   &[data-entering] {
     animation: modal-zoom 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
diff --git a/starters/docs/src/Popover.css b/starters/docs/src/Popover.css
index ae55f90464c..0628d9c2d43 100644
--- a/starters/docs/src/Popover.css
+++ b/starters/docs/src/Popover.css
@@ -28,6 +28,10 @@
     stroke-width: 2px;
   }
 
+  &:not([data-open]) {
+    opacity: 0;
+  }
+
   &[data-entering],
   &[data-exiting] {
     transform: var(--origin);
diff --git a/starters/tailwind/src/Modal.tsx b/starters/tailwind/src/Modal.tsx
index 13cc96111bc..28a7b49e684 100644
--- a/starters/tailwind/src/Modal.tsx
+++ b/starters/tailwind/src/Modal.tsx
@@ -18,8 +18,8 @@ const overlayStyles = tv({
 const modalStyles = tv({
   base: 'font-sans w-full max-w-[min(90vw,450px)] max-h-[calc(var(--visual-viewport-height)*.9)] rounded-2xl bg-white dark:bg-neutral-800/70 dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:bg-[Canvas] text-left align-middle text-neutral-700 dark:text-neutral-300 shadow-2xl bg-clip-padding border border-black/10 dark:border-white/10',
   variants: {
-    isEntering: {
-      true: 'animate-in zoom-in-105 ease-out duration-200'
+    isReady: {
+      false: 'opacity-0'
     },
     isExiting: {
       true: 'animate-out zoom-out-95 ease-in duration-200'

From c9fbf32d0a7735fe61cf6444b168bb81a7103525 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?=
 <nikolas.schroeter@widynski.technology>
Date: Wed, 10 Jun 2026 02:43:29 +0200
Subject: [PATCH 5/7] chore: lint

---
 packages/react-aria/src/utils/runAfterTransition.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-aria/src/utils/runAfterTransition.ts b/packages/react-aria/src/utils/runAfterTransition.ts
index 013c5f9e458..06c24f8be34 100644
--- a/packages/react-aria/src/utils/runAfterTransition.ts
+++ b/packages/react-aria/src/utils/runAfterTransition.ts
@@ -56,7 +56,6 @@ function onTransitionStart(e: Event) {
 
 function onTransitionEnd(e: Event) {
   let eventTarget = getEventTarget(e);
-  let ownerDocument = getOwnerDocument(eventTarget);
 
   if (!isTransitionEvent(e) || !eventTarget) {
     return;

From 9bcbdf4cab7fb44b921ff7f63f4500b8a0e40377 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?=
 <nikolas.schroeter@widynski.technology>
Date: Thu, 11 Jun 2026 14:14:26 +0200
Subject: [PATCH 6/7] feat: cleanup support and placement consideration

---
 packages/react-aria-components/src/Modal.tsx  | 12 +-------
 .../react-aria-components/src/Popover.tsx     | 19 ++++---------
 .../react-aria/src/utils/runAfterKeyboard.ts  | 28 +++++++++++++++----
 .../src/utils/runAfterTransition.ts           |  9 ++++--
 4 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/packages/react-aria-components/src/Modal.tsx b/packages/react-aria-components/src/Modal.tsx
index ecc7fdb8211..10c04671661 100644
--- a/packages/react-aria-components/src/Modal.tsx
+++ b/packages/react-aria-components/src/Modal.tsx
@@ -245,7 +245,6 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
   let {state} = props;
   let {modalProps, underlayProps} = useModalOverlay(props, state, modalRef);
 
-  let unmountRef = useRef(false);
   let [isOpen, setIsOpen] = useState(false);
   let entering = useEnterAnimation(props.overlayRef, isOpen) || props.isEntering || false;
   let renderProps = useRenderProps({
@@ -283,16 +282,7 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
 
   // Since an auto-focused input may open the OSK, we defer the reveal, as a courtesy, to avoid layout shift.
   // TODO: This can cause native focus scroll-into-view to abort, so we might want to do that manually?
-  useLayoutEffect(() => {
-    runAfterKeyboard(() => {
-      if (unmountRef.current) return;
-      setIsOpen(true);
-    });
-
-    return () => {
-      unmountRef.current = true;
-    };
-  }, []);
+  useLayoutEffect(() => runAfterKeyboard(() => setIsOpen(true)), []);
 
   return (
     <Overlay isExiting={props.isExiting} portalContainer={UNSTABLE_portalContainer}>
diff --git a/packages/react-aria-components/src/Popover.tsx b/packages/react-aria-components/src/Popover.tsx
index 733d94b9227..5ea2be67636 100644
--- a/packages/react-aria-components/src/Popover.tsx
+++ b/packages/react-aria-components/src/Popover.tsx
@@ -221,8 +221,9 @@ function PopoverInner({
   let containerRef = useRef<HTMLDivElement | null>(null);
   let groupCtx = useContext(PopoverGroupContext);
   let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';
-  let unmountRef = useRef(false);
+
   let [isOpen, setIsOpen] = useState(false);
+  let [isDialog, setIsDialog] = useState(false);
 
   let {popoverProps, underlayProps, arrowProps, placement, triggerAnchorPoint} = usePopover(
     {
@@ -252,10 +253,9 @@ function PopoverInner({
   // Automatically render Popover with role=dialog except when isNonModal is true,
   // or a dialog is already nested inside the popover.
   let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';
-  let [isDialog, setDialog] = useState(false);
   useLayoutEffect(() => {
     if (ref.current) {
-      setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));
+      setIsDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));
     }
   }, [ref, shouldBeDialog]);
 
@@ -306,16 +306,7 @@ function PopoverInner({
 
   // Since an auto-focused input may open the OSK, we defer the reveal, as a courtesy, to avoid layout shift.
   // TODO: This can cause native focus scroll-into-view to abort, so we might want to do that manually?
-  useLayoutEffect(() => {
-    runAfterKeyboard(() => {
-      if (unmountRef.current) return;
-      setIsOpen(true);
-    });
-
-    return () => {
-      unmountRef.current = true;
-    };
-  }, []);
+  useLayoutEffect(() => runAfterKeyboard(() => setIsOpen(true)), []);
 
   let overlay = (
     <dom.div
@@ -331,7 +322,7 @@ function PopoverInner({
       dir={props.dir}
       data-trigger={props.trigger}
       data-placement={placement}
-      data-open={isOpen || undefined}
+      data-open={(!!placement && isOpen) || undefined}
       data-entering={isEntering || undefined}
       data-exiting={isExiting || undefined}>
       {!props.isNonModal && <DismissButton onDismiss={state.close} />}
diff --git a/packages/react-aria/src/utils/runAfterKeyboard.ts b/packages/react-aria/src/utils/runAfterKeyboard.ts
index f3b40d54430..268a662697f 100644
--- a/packages/react-aria/src/utils/runAfterKeyboard.ts
+++ b/packages/react-aria/src/utils/runAfterKeyboard.ts
@@ -97,19 +97,22 @@ function onTransitionEnd(): void {
  * Delays a callback execution until a keyboard transition may no longer impact layout.
  * Guarantees an invocation if an expected transition did not finish within 300ms.
  */
-export function runAfterKeyboard(fn: QueuedCallback): void {
+export function runAfterKeyboard(fn: QueuedCallback): () => void {
   let ownerWindow = getOwnerWindow();
   let ownerDocument = getOwnerDocument();
   let ownerViewport = getOwnerViewport();
 
-  if (ownerViewport == null) return fn(false);
+  // Flush synchronously when the viewport API is unsupported.
+  if (ownerViewport == null) {
+    return fn(false) ?? (() => {});
+  }
 
   // Assert based on geometry rather than focus to support intermediate states, in which
   // document.activeElement can't be used to reliably infer the open state of the OSK.
   let wasKeyboardOpen = isKeyboardOpen();
 
   // Wait one frame to see if focus lands on an input.
-  ownerWindow.requestAnimationFrame(() => {
+  let frame = ownerWindow.requestAnimationFrame(() => {
     let activeElement = getActiveElement(ownerDocument);
     let willKeyboardOpen = ownerDocument.hasFocus() && willOpenKeyboard(activeElement);
 
@@ -126,25 +129,33 @@ export function runAfterKeyboard(fn: QueuedCallback): void {
     resizeCallbacks.add(fn);
     onTransitionStart();
   });
+
+  return () => {
+    ownerWindow.cancelAnimationFrame(frame);
+    resizeCallbacks.delete(fn);
+  };
 }
 
 /**
  * Delays a callback execution until the on-screen keyboard has finished its transition.
  * Guarantees an invocation if an expected transition did not finish within 600ms.
  */
-export function runAfterKeyboardTransition(fn: QueuedCallback): void {
+export function runAfterKeyboardTransition(fn: QueuedCallback): () => void {
   let ownerWindow = getOwnerWindow();
   let ownerDocument = getOwnerDocument();
   let ownerViewport = getOwnerViewport();
 
-  if (ownerViewport == null) return fn(false);
+  // Flush synchronously when the viewport API is unsupported.
+  if (ownerViewport == null) {
+    return fn(false) ?? (() => {});
+  }
 
   // Assert based on geometry rather than focus to support intermediate states, in which
   // document.activeElement can't be used to reliably infer the open state of the OSK.
   let wasKeyboardOpen = isKeyboardOpen();
 
   // Wait one frame to see if focus lands on an input.
-  ownerWindow.requestAnimationFrame(() => {
+  let frame = ownerWindow.requestAnimationFrame(() => {
     let activeElement = getActiveElement(ownerDocument);
     let willKeyboardOpen = ownerDocument.hasFocus() && willOpenKeyboard(activeElement);
 
@@ -156,4 +167,9 @@ export function runAfterKeyboardTransition(fn: QueuedCallback): void {
     transitionCallbacks.add(fn);
     onTransitionStart();
   });
+
+  return () => {
+    ownerWindow.cancelAnimationFrame(frame);
+    transitionCallbacks.delete(fn);
+  };
 }
diff --git a/packages/react-aria/src/utils/runAfterTransition.ts b/packages/react-aria/src/utils/runAfterTransition.ts
index 06c24f8be34..bde1286e09e 100644
--- a/packages/react-aria/src/utils/runAfterTransition.ts
+++ b/packages/react-aria/src/utils/runAfterTransition.ts
@@ -118,11 +118,11 @@ if (typeof document !== 'undefined') {
 /**
  * Delays a callback execution until all elements finished their transition.
  */
-export function runAfterTransition(fn: QueuedCallback): void {
+export function runAfterTransition(fn: QueuedCallback): () => void {
   let ownerWindow = getOwnerWindow();
 
   // Wait one frame to see if an animation starts, e.g. a transition on mount.
-  ownerWindow.requestAnimationFrame(() => {
+  let frame = ownerWindow.requestAnimationFrame(() => {
     cleanupDetachedElements();
 
     // If no transitions are running, call the function immediately.
@@ -133,4 +133,9 @@ export function runAfterTransition(fn: QueuedCallback): void {
 
     transitionCallbacks.add(fn);
   });
+
+  return () => {
+    ownerWindow.cancelAnimationFrame(frame);
+    transitionCallbacks.delete(fn);
+  };
 }

From 2d6fc4538086d88e678dd3a7f00fca251c64c669 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?=
 <nikolas.schroeter@widynski.technology>
Date: Thu, 11 Jun 2026 15:41:44 +0200
Subject: [PATCH 7/7] chore: migrate usepreventscroll

---
 .../src/overlays/usePreventScroll.ts          | 39 +++----------------
 1 file changed, 5 insertions(+), 34 deletions(-)

diff --git a/packages/react-aria/src/overlays/usePreventScroll.ts b/packages/react-aria/src/overlays/usePreventScroll.ts
index 69cc0c8ae52..a994a75a663 100644
--- a/packages/react-aria/src/overlays/usePreventScroll.ts
+++ b/packages/react-aria/src/overlays/usePreventScroll.ts
@@ -10,12 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {addEvent} from '../utils/useEvent';
 import {chain} from '../utils/chain';
-import {getActiveElement, getEventTarget} from '../utils/shadowdom/DOMFunctions';
+import {getEventTarget} from '../utils/shadowdom/DOMFunctions';
 import {getNonce} from '../utils/getNonce';
 import {getScrollParent} from '../utils/getScrollParent';
 import {isIOS, isWebKit} from '../utils/platform';
 import {isScrollable} from '../utils/isScrollable';
+import {runAfterKeyboard} from '../utils/runAfterKeyboard';
 import {useLayoutEffect} from '../utils/useLayoutEffect';
 import {willOpenKeyboard} from '../utils/keyboard';
 
@@ -182,7 +184,7 @@ function preventScrollMobileSafari() {
     if (relatedTarget && willOpenKeyboard(relatedTarget)) {
       // Focus without scrolling the whole page, and then scroll into view manually.
       relatedTarget.focus({preventScroll: true});
-      scrollIntoViewWhenReady(relatedTarget, willOpenKeyboard(target));
+      runAfterKeyboard(() => scrollIntoView(relatedTarget));
     } else if (!relatedTarget) {
       // When tapping the Done button on the keyboard, focus moves to the body.
       // FocusScope will then restore focus back to the input. Later when tapping
@@ -200,15 +202,11 @@ function preventScrollMobileSafari() {
     configurable: true,
     writable: true,
     value: function (opts?: FocusOptions) {
-      // Track whether the keyboard was already visible before.
-      let activeElement = getActiveElement();
-      let wasKeyboardVisible = activeElement != null && willOpenKeyboard(activeElement);
-
       // Focus the element without scrolling the page.
       focus.call(this, {...opts, preventScroll: true});
 
       if (!opts || !opts.preventScroll) {
-        scrollIntoViewWhenReady(this, wasKeyboardVisible);
+        runAfterKeyboard(() => scrollIntoView(this));
       }
     }
   });
@@ -241,33 +239,6 @@ function setStyle(element: HTMLElement, style: string, value: string) {
   };
 }
 
-// Adds an event listener to an element, and returns a function to remove it.
-function addEvent<K extends keyof GlobalEventHandlersEventMap>(
-  target: Document | Window,
-  event: K,
-  handler: (this: Document | Window, ev: GlobalEventHandlersEventMap[K]) => any,
-  options?: boolean | AddEventListenerOptions
-) {
-  // internal function, so it's ok to ignore the difficult to fix type error
-  // @ts-ignore
-  target.addEventListener(event, handler, options);
-  return () => {
-    // @ts-ignore
-    target.removeEventListener(event, handler, options);
-  };
-}
-
-function scrollIntoViewWhenReady(target: Element, wasKeyboardVisible: boolean) {
-  if (wasKeyboardVisible || !visualViewport) {
-    // If the keyboard was already visible, scroll the target into view immediately.
-    scrollIntoView(target);
-  } else {
-    // Otherwise, wait for the visual viewport to resize before scrolling so we can
-    // measure the correct position to scroll to.
-    visualViewport.addEventListener('resize', () => scrollIntoView(target), {once: true});
-  }
-}
-
 function scrollIntoView(target: Element) {
   let root = document.scrollingElement || document.documentElement;
   let nextTarget: Element | null = target;