fix: Improve behavior of modals on iOS 26 (#8888)

* Improve usePreventScroll focus behavior on iOS

* Make visual viewport size update before keyboard animation

* Update modals and trays to extend underlay behind browser UI

* Fix S2 docs header appearing above modals

* fix removing event

* Clamp scroll position to prevent over-scrolling

* Prevent scrolling the whole page when programmatically focusing

* Avoid setting size on blur too early

* Example app fix

* Ensure temporary input has attributes that might affect keyboard size

* typo

* Fix scroll into view calculation when the address bar is collapsed

* Try removing the hidden input entirely

Author: devongovett

packages/@adobe/spectrum-css-temp/components/tray/index.css

@@ -20,14 +20,13 @@
 
 .spectrum-Tray-wrapper {
   inset-inline-start: 0;
-  /* Positioned at the top of the window */
-  position: fixed;
+  position: absolute;
   top: 0;
 
   display: flex;
   justify-content: center;
   width: 100%;
-  height: 100vh;
+  height: 100dvh;
 
   /* Don't catch clicks */
   pointer-events: none;
@@ -55,10 +54,12 @@
   max-height: calc(var(--spectrum-visual-viewport-height) - var(--spectrum-tray-margin-top));
   /* Add padding at the bottom to account for the rest of the viewport height behind the keyboard.
    * This is necessary so that there isn't a visible gap that appears while the keyboard is animating
-   * in and out. Fall back to the safe area inset to account for things like iOS home indicator. */
-  padding-bottom: max(calc(100vh - var(--spectrum-visual-viewport-height)), env(safe-area-inset-bottom));
+   * in and out. Fall back to the safe area inset to account for things like iOS home indicator.
+     We also add an additional 100vh of padding (offset by the bottom position below) so the tray 
+     extends behind Safari's address bar and keyboard in iOS 26. */
+  padding-bottom: calc(max(calc(100dvh - var(--spectrum-visual-viewport-height)), env(safe-area-inset-bottom)) + 100vh);
   position: absolute;
-  bottom: 0;
+  bottom: -100vh;
   outline: none;
   display: flex;
   flex-direction: column;

packages/@adobe/spectrum-css-temp/components/underlay/index.css

@@ -23,7 +23,8 @@ governing permissions and limitations under the License.
 .spectrum-Underlay {
   composes: spectrum-overlay;
 
-  position: fixed;
+  /* Use position: absolute instead of fixed to avoid being clipped to the "inner" viewport in iOS 26 */
+  position: absolute;
   top: 0;
   right: 0;
   bottom: 0;

packages/@react-aria/dialog/docs/useDialog.mdx

@@ -131,6 +131,7 @@ The `Modal` and `ModalTrigger` components render the dialog within a typical mod
 ```tsx example export=true render=false
 import {useOverlayTriggerState} from '@react-stately/overlays';
 import {Overlay, useModalOverlay, useOverlayTrigger} from '@react-aria/overlays';
+import {useViewportSize} from '@react-aria/utils';
 
 function Modal({state, children, ...props}) {
   let ref = React.useRef(null);
@@ -140,18 +141,27 @@ function Modal({state, children, ...props}) {
     <Overlay>
       <div
         style={{
-          position: 'fixed',
+          position: 'absolute',
           zIndex: 100,
           top: 0,
           left: 0,
-          bottom: 0,
-          right: 0,
-          background: 'rgba(0, 0, 0, 0.5)',
+          width: '100%',
+          height: document.body.clientHeight,
+          background: 'rgba(0, 0, 0, 0.5)'
+        }}
+        {...underlayProps} />
+      <div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: useViewportSize().height + 'px',
+          zIndex: 101,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center'
-        }}
-        {...underlayProps}>
+        }}>
         <div
           {...modalProps}
           ref={ref}

packages/@react-aria/overlays/docs/useModalOverlay.mdx

@@ -75,6 +75,7 @@ The `Modal` component uses an &lt;<TypeLink links={docs.links} type={docs.export
 
 ```tsx example export=true render=false
 import {Overlay, useModalOverlay} from '@react-aria/overlays';
+import {useViewportSize} from '@react-aria/utils';
 
 function Modal({state, children, ...props}) {
   let ref = React.useRef(null);
@@ -84,18 +85,27 @@ function Modal({state, children, ...props}) {
     <Overlay>
       <div
         style={{
-          position: 'fixed',
+          position: 'absolute',
           zIndex: 100,
           top: 0,
           left: 0,
-          bottom: 0,
-          right: 0,
-          background: 'rgba(0, 0, 0, 0.5)',
+          width: '100%',
+          height: document.body.clientHeight,
+          background: 'rgba(0, 0, 0, 0.5)'
+        }}
+        {...underlayProps} />
+      <div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: useViewportSize().height + 'px',
+          zIndex: 101,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center'
-        }}
-        {...underlayProps}>
+        }}>
         <div
           {...modalProps}
           ref={ref}

packages/@react-aria/overlays/src/usePreventScroll.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {chain, getScrollParent, isIOS, useLayoutEffect} from '@react-aria/utils';
+import {chain, getScrollParent, isIOS, useLayoutEffect, willOpenKeyboard} from '@react-aria/utils';
 
 interface PreventScrollOptions {
   /** Whether the scroll lock is disabled. */
@@ -19,19 +19,6 @@ interface PreventScrollOptions {
 
 const visualViewport = typeof document !== 'undefined' && window.visualViewport;
 
-// HTML input types that do not cause the software keyboard to appear.
-const nonTextInputTypes = new Set([
-  'checkbox',
-  'radio',
-  'range',
-  'color',
-  'file',
-  'image',
-  'button',
-  'submit',
-  'reset'
-]);
-
 // The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
 let preventScrollCount = 0;
 let restore;
@@ -100,32 +87,32 @@ function preventScrollStandard() {
 //    the top or bottom. Work around a bug where this does not work when the element does not actually overflow
 //    by preventing default in a `touchmove` event.
 // 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
-// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
-//    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
-//    into view ourselves, without scrolling the whole page.
-// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the
-//    same visually, but makes the actual scroll position always zero. This is required to make all of the
-//    above work or Safari will still try to scroll the page when focusing an input.
-// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting
-//    to navigate to an input with the next/previous buttons that's outside a modal.
+// 4. When focus moves to an input, create an off screen input and focus that temporarily. This prevents 
+//    Safari from scrolling the page. After a small delay, focus the real input and scroll it into view
+//    ourselves, without scrolling the whole page.
 function preventScrollMobileSafari() {
   let scrollable: Element;
-  let restoreScrollableStyles;
   let onTouchStart = (e: TouchEvent) => {
     // Store the nearest scrollable parent element from the element that the user touched.
     scrollable = getScrollParent(e.target as Element, true);
     if (scrollable === document.documentElement && scrollable === document.body) {
       return;
     }
-
-    // Prevent scrolling up when at the top and scrolling down when at the bottom
-    // of a nested scrollable area, otherwise mobile Safari will start scrolling
-    // the window instead.
-    if (scrollable instanceof HTMLElement && window.getComputedStyle(scrollable).overscrollBehavior === 'auto') {
-      restoreScrollableStyles = setStyle(scrollable, 'overscrollBehavior', 'contain');
-    }
   };
 
+  // Prevent scrolling up when at the top and scrolling down when at the bottom
+  // of a nested scrollable area, otherwise mobile Safari will start scrolling
+  // the window instead.
+  // This must be applied before the touchstart event as of iOS 26, so inject it as a <style> element.
+  let style = document.createElement('style');
+  style.textContent = `
+@layer {
+  * {
+    overscroll-behavior: contain;
+  }
+}`.trim();
+  document.head.prepend(style);
+
   let onTouchMove = (e: TouchEvent) => {
     // Prevent scrolling the window.
     if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
@@ -144,86 +131,48 @@ function preventScrollMobileSafari() {
     }
   };
 
-  let onTouchEnd = () => {
-    if (restoreScrollableStyles) {
-      restoreScrollableStyles();
-    }
-  };
-
-  let onFocus = (e: FocusEvent) => {
+  let onBlur = (e: FocusEvent) => {
     let target = e.target as HTMLElement;
-    if (willOpenKeyboard(target)) {
-      setupStyles();
-
-      // Apply a transform to trick Safari into thinking the input is at the top of the page
-      // so it doesn't try to scroll it into view.
-      target.style.transform = 'translateY(-2000px)';
-      requestAnimationFrame(() => {
-        target.style.transform = '';
-
-        // This will have prevented the browser from scrolling the focused element into view,
-        // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
-        if (visualViewport) {
-          if (visualViewport.height < window.innerHeight) {
-            // If the keyboard is already visible, do this after one additional frame
-            // to wait for the transform to be removed.
-            requestAnimationFrame(() => {
-              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});
-          }
-        }
-      });
+    let relatedTarget = e.relatedTarget as HTMLElement | null;
+    if (relatedTarget && willOpenKeyboard(relatedTarget)) {
+      // Focus without scrolling the whole page, and then scroll into view manually.
+      relatedTarget.focus({preventScroll: true});
+      scrollIntoViewWhenReady(relatedTarget, willOpenKeyboard(target));
+    } 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
+      // the same input again, it is already focused, so no blur event will fire,
+      // resulting in the flow above never running and Safari's native scrolling occurring.
+      // Instead, move focus to the parent focusable element (e.g. the dialog).
+      let focusable = target.parentElement?.closest('[tabindex]') as HTMLElement | null;
+      focusable?.focus({preventScroll: true});
     }
   };
 
-  let restoreStyles: null | (() => void) = null;
-  let setupStyles = () => {
-    if (restoreStyles) {
-      return;
-    }
-
-    let onWindowScroll = () => {
-      // Last resort. If the window scrolled, scroll it back to the top.
-      // It should always be at the top because the body will have a negative margin (see below).
-      window.scrollTo(0, 0);
-    };
-
-    // Record the original scroll position so we can restore it.
-    // Then apply a negative margin to the body to offset it by the scroll position. This will
-    // enable us to scroll the window to the top, which is required for the rest of this to work.
-    let scrollX = window.pageXOffset;
-    let scrollY = window.pageYOffset;
+  // 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 wasKeyboardVisible = document.activeElement != null && willOpenKeyboard(document.activeElement);
 
-    restoreStyles = chain(
-      addEvent(window, 'scroll', onWindowScroll),
-      setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`),
-      setStyle(document.documentElement, 'overflow', 'hidden'),
-      setStyle(document.body, 'marginTop', `-${scrollY}px`),
-      () => {
-        window.scrollTo(scrollX, scrollY);
-      }
-    );
+    // Focus the element without scrolling the page.
+    focus.call(this, {...opts, preventScroll: true});
 
-    // Scroll to the top. The negative margin on the body will make this appear the same.
-    window.scrollTo(0, 0);
+    if (!opts || !opts.preventScroll) {
+      scrollIntoViewWhenReady(this, wasKeyboardVisible);
+    }
   };
 
   let removeEvents = chain(
     addEvent(document, 'touchstart', onTouchStart, {passive: false, capture: true}),
     addEvent(document, 'touchmove', onTouchMove, {passive: false, capture: true}),
-    addEvent(document, 'touchend', onTouchEnd, {passive: false, capture: true}),
-    addEvent(document, 'focus', onFocus, true)
+    addEvent(document, 'blur', onBlur, true)
   );
 
   return () => {
-    // Restore styles and scroll the page back to where it was.
-    restoreScrollableStyles?.();
-    restoreStyles?.();
     removeEvents();
+    style.remove();
+    HTMLElement.prototype.focus = focus;
   };
 }
 
@@ -253,28 +202,42 @@ function addEvent<K extends keyof GlobalEventHandlersEventMap>(
   };
 }
 
+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;
   while (nextTarget && nextTarget !== root) {
     // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
     let scrollable = getScrollParent(nextTarget);
     if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== nextTarget) {
-      let scrollableTop = scrollable.getBoundingClientRect().top;
-      let targetTop = nextTarget.getBoundingClientRect().top;
-      if (targetTop > scrollableTop + nextTarget.clientHeight) {
-        scrollable.scrollTop += targetTop - scrollableTop;
+      let scrollableRect = scrollable.getBoundingClientRect();
+      let targetRect = nextTarget.getBoundingClientRect();
+      if (targetRect.top < scrollableRect.top || targetRect.bottom > scrollableRect.top + nextTarget.clientHeight) {
+        let bottom = scrollableRect.bottom;
+        if (visualViewport) {
+          bottom = Math.min(bottom, visualViewport.offsetTop + visualViewport.height);
+        }
+
+        // Center within the viewport.
+        let adjustment = (targetRect.top - scrollableRect.top) - ((bottom - scrollableRect.top) / 2 - targetRect.height / 2);
+        scrollable.scrollTo({
+          // Clamp to the valid range to prevent over-scrolling.
+          top: Math.max(0, Math.min(scrollable.scrollHeight - scrollable.clientHeight, scrollable.scrollTop + adjustment)),
+          behavior: 'smooth'
+        });
       }
     }
 
     nextTarget = scrollable.parentElement;
   }
 }
-
-function willOpenKeyboard(target: Element) {
-  return (
-    (target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
-    target instanceof HTMLTextAreaElement ||
-    (target instanceof HTMLElement && target.isContentEditable)
-  );
-}

packages/@react-aria/utils/src/index.ts

@@ -48,7 +48,7 @@ export {useLoadMore} from './useLoadMore';
 export {useLoadMoreSentinel, useLoadMoreSentinel as UNSTABLE_useLoadMoreSentinel} from './useLoadMoreSentinel';
 export {inertValue} from './inertValue';
 export {CLEAR_FOCUS_EVENT, FOCUS_EVENT} from './constants';
-export {isCtrlKeyPressed} from './keyboard';
+export {isCtrlKeyPressed, willOpenKeyboard} from './keyboard';
 export {useEnterAnimation, useExitAnimation} from './animation';
 export {isFocusable, isTabbable} from './isFocusable';