fix: Allow pinch zooming and text selection in modals on iOS (#8922)

Author: devongovett

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {chain, getScrollParent, isIOS, useLayoutEffect, willOpenKeyboard} from '@react-aria/utils';
+import {chain, getScrollParent, isIOS, isScrollable, useLayoutEffect, willOpenKeyboard} from '@react-aria/utils';
 
 interface PreventScrollOptions {
   /** Whether the scroll lock is disabled. */
@@ -85,18 +85,35 @@ function preventScrollStandard() {
 //    on the window.
 // 2. Set `overscroll-behavior: contain` on nested scrollable regions so they do not scroll the page when at
 //    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.
+//    by preventing default in a `touchmove` event. This is best effort: we can't prevent default when pinch
+//    zooming or when an element contains text selection, which may allow scrolling in some cases.
 // 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
 // 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 allowTouchMove = false;
   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;
+    let target = e.target as Element;
+    scrollable = isScrollable(target) ? target : getScrollParent(target, true);
+    allowTouchMove = false;
+    
+    // If the target is selected, don't preventDefault in touchmove to allow user to adjust selection.
+    let selection = target.ownerDocument.defaultView!.getSelection();
+    if (selection && !selection.isCollapsed && selection.containsNode(target, true)) {
+      allowTouchMove = true;
+    }
+
+    // If this is a focused input element with a selected range, allow user to drag the selection handles.
+    if (
+      'selectionStart' in target && 
+      'selectionEnd' in target &&
+      (target.selectionStart as number) < (target.selectionEnd as number) &&
+      target.ownerDocument.activeElement === target
+    ) {
+      allowTouchMove = true;
     }
   };
 
@@ -114,6 +131,11 @@ function preventScrollMobileSafari() {
   document.head.prepend(style);
 
   let onTouchMove = (e: TouchEvent) => {
+    // Allow pinch-zooming.
+    if (e.touches.length === 2 || allowTouchMove) {
+      return;
+    }
+
     // Prevent scrolling the window.
     if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
       e.preventDefault();

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

@@ -28,6 +28,11 @@ export function useViewportSize(): ViewportSize {
   useEffect(() => {
     // Use visualViewport api to track available height even on iOS virtual keyboard opening
     let onResize = () => {
+      // Ignore updates when zoomed.
+      if (visualViewport && visualViewport.scale > 1) {
+        return;
+      }
+
       setSize(size => {
         let newSize = getViewportSize();
         if (newSize.width === size.width && newSize.height === size.height) {
@@ -41,6 +46,10 @@ export function useViewportSize(): ViewportSize {
     // 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(e.target as Element)) {
         // Wait one frame to see if a new element gets focused.
         frame = requestAnimationFrame(() => {
@@ -81,7 +90,8 @@ export function useViewportSize(): ViewportSize {
 
 function getViewportSize(): ViewportSize {
   return {
-    width: (visualViewport && visualViewport?.width) || window.innerWidth,
-    height: (visualViewport && visualViewport?.height) || window.innerHeight
+    // Multiply by the visualViewport scale to get the "natural" size, unaffected by pinch zooming.
+    width: visualViewport ? visualViewport.width * visualViewport.scale : window.innerWidth,
+    height: visualViewport ? visualViewport.height * visualViewport.scale : window.innerHeight
   };
 }