Fix mobile column resizing (#3727)

Author: snowystinger

packages/@react-spectrum/table/src/TableView.tsx

@@ -14,7 +14,14 @@ import ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';
 import {chain, mergeProps, useLayoutEffect} from '@react-aria/utils';
 import {Checkbox} from '@react-spectrum/checkbox';
 import ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';
-import {classNames, useDOMRef, useFocusableRef, useStyleProps, useUnwrapDOMRef} from '@react-spectrum/utils';
+import {
+  classNames,
+  useDOMRef,
+  useFocusableRef,
+  useIsMobileDevice,
+  useStyleProps,
+  useUnwrapDOMRef
+} from '@react-spectrum/utils';
 import {DOMRef, FocusableRef, MoveMoveEvent} from '@react-types/shared';
 import {FocusRing, FocusScope, useFocusRing} from '@react-aria/focus';
 import {getInteractionModality, useHover, usePress} from '@react-aria/interactions';
@@ -653,18 +660,26 @@ function ResizableTableColumnHeader(props) {
     return options;
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [allowsSorting]);
+  let isMobile = useIsMobileDevice();
 
   useEffect(() => {
     if (columnState.currentlyResizingColumn === column.key) {
       // focusSafely won't actually focus because the focus moves from the menuitem to the body during the after transition wait
       // without the immediate timeout, Android Chrome doesn't move focus to the resizer
+      if (isMobile) {
+        setTimeout(() => {
+          resizingRef.current.focus();
+          onFocusedResizer();
+        }, 400);
+        return;
+      }
       setTimeout(() => {
         resizingRef.current.focus();
         onFocusedResizer();
       }, 0);
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [columnState.currentlyResizingColumn, column.key]);
+  }, [columnState.currentlyResizingColumn, column.key, isMobile]);
 
   let showResizer = !isEmpty && ((headerRowHovered && getInteractionModality() !== 'keyboard') || columnState.currentlyResizingColumn != null);