Table column resizing support for RAC (#4785)

Author: devongovett

packages/@react-aria/focus/src/FocusScope.tsx

@@ -551,14 +551,11 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus: boolean,
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scopeRef, contain]);
 
-  // useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously.
   useLayoutEffect(() => {
     if (!restoreFocus) {
       return;
     }
 
-    focusScopeTree.getTreeNode(scopeRef).nodeToRestore = nodeToRestoreRef.current;
-
     // Handle the Tab key so that tabbing out of the scope goes to the next element
     // after the node that had focus when the scope mounted. This is important when
     // using portals for overlays, so that focus goes to the expected element when
@@ -621,6 +618,18 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus: boolean,
       if (!contain) {
         document.removeEventListener('keydown', onKeyDown, true);
       }
+    };
+  }, [scopeRef, restoreFocus, contain]);
+
+  // useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously.
+  useLayoutEffect(() => {
+    if (!restoreFocus) {
+      return;
+    }
+
+    focusScopeTree.getTreeNode(scopeRef).nodeToRestore = nodeToRestoreRef.current;
+
+    return () => {
       let nodeToRestore = focusScopeTree.getTreeNode(scopeRef).nodeToRestore;
 
       // if we already lost focus to the body and this was the active scope, then we should attempt to restore
@@ -662,7 +671,7 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus: boolean,
         });
       }
     };
-  }, [scopeRef, restoreFocus, contain]);
+  }, [scopeRef, restoreFocus]);
 }
 
 /**

packages/@react-aria/menu/src/useMenuTrigger.ts

@@ -86,6 +86,11 @@ export function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTrigge
           e.preventDefault();
           state.toggle('last');
           break;
+        default:
+          // Allow other keys.
+          if ('continuePropagation' in e) {
+            e.continuePropagation();
+          }
       }
     }
   };

packages/@react-aria/overlays/src/Overlay.tsx

@@ -29,7 +29,12 @@ export interface OverlayProps {
    * This option should be used very carefully. When focus management is disabled, you must
    * implement focus containment and restoration to ensure the overlay is keyboard accessible.
    */
-  disableFocusManagement?: boolean
+  disableFocusManagement?: boolean,
+  /**
+   * Whether the overlay is currently performing an exit animation. When true,
+   * focus is allowed to move outside.
+   */
+  isExiting?: boolean
 }
 
 export const OverlayContext = React.createContext(null);
@@ -40,7 +45,7 @@ export const OverlayContext = React.createContext(null);
  */
 export function Overlay(props: OverlayProps) {
   let isSSR = useIsSSR();
-  let {portalContainer = isSSR ? null : document.body} = props;
+  let {portalContainer = isSSR ? null : document.body, isExiting} = props;
   let [contain, setContain] = useState(false);
   let contextValue = useMemo(() => ({contain, setContain}), [contain, setContain]);
 
@@ -52,7 +57,7 @@ export function Overlay(props: OverlayProps) {
   if (!props.disableFocusManagement) {
     contents = (
       <OverlayContext.Provider value={contextValue}>
-        <FocusScope restoreFocus contain={contain}>
+        <FocusScope restoreFocus contain={contain && !isExiting}>
           {props.children}
         </FocusScope>
       </OverlayContext.Provider>

packages/@react-aria/selection/src/useSelectableCollection.ts

@@ -319,7 +319,9 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`) as HTMLElement;
       if (element) {
         // This prevents a flash of focus on the first/last element in the collection, or the collection itself.
-        focusWithoutScrolling(element);
+        if (!element.contains(document.activeElement)) {
+          focusWithoutScrolling(element);
+        }
 
         let modality = getInteractionModality();
         if (modality === 'keyboard') {

packages/@react-aria/table/src/useTableColumnResize.ts

@@ -10,14 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
-import {ChangeEvent, Key, RefObject, useCallback, useRef} from 'react';
+import {ChangeEvent, Key, RefObject, useCallback, useEffect, useRef} from 'react';
+import {ColumnSize} from '@react-types/table';
 import {DOMAttributes, FocusableElement} from '@react-types/shared';
 import {focusSafely} from '@react-aria/focus';
-import {focusWithoutScrolling, mergeProps, useDescription, useId} from '@react-aria/utils';
 import {getColumnHeaderId} from './utils';
 import {GridNode} from '@react-types/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {mergeProps, useDescription, useEffectEvent, useId} from '@react-aria/utils';
 import {TableColumnResizeState} from '@react-stately/table';
 import {useInteractionModality, useKeyboard, useMove, usePress} from '@react-aria/interactions';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
@@ -46,84 +47,82 @@ export interface AriaTableColumnResizeProps<T> {
   /** If resizing is disabled. */
   isDisabled?: boolean,
   /** Called when resizing starts. */
-  onResizeStart?: (widths: Map<Key, number | string>) => void,
+  onResizeStart?: (widths: Map<Key, ColumnSize>) => void,
   /** Called for every resize event that results in new column sizes. */
-  onResize?: (widths: Map<Key, number | string>) => void,
+  onResize?: (widths: Map<Key, ColumnSize>) => void,
   /** Called when resizing ends. */
-  onResizeEnd?: (widths: Map<Key, number | string>) => void
+  onResizeEnd?: (widths: Map<Key, ColumnSize>) => void
 }
 
-export interface AriaTableColumnResizeState<T> extends Omit<TableColumnResizeState<T>, 'widths'> {}
-
 /**
  * Provides the behavior and accessibility implementation for a table column resizer element.
  * @param props - Props for the resizer.
  * @param state - State for the table's resizable columns, as returned by `useTableColumnResizeState`.
  * @param ref - The ref attached to the resizer's visually hidden input element.
  */
-export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, state: AriaTableColumnResizeState<T>, ref: RefObject<HTMLInputElement>): TableColumnResizeAria {
+export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, state: TableColumnResizeState<T>, ref: RefObject<HTMLInputElement>): TableColumnResizeAria {
   let {column: item, triggerRef, isDisabled, onResizeStart, onResize, onResizeEnd, 'aria-label': ariaLabel} = props;
   const stringFormatter = useLocalizedStringFormatter(intlMessages);
   let id = useId();
   let isResizing = state.resizingColumn === item.key;
   let isResizingRef = useRef(isResizing);
   let lastSize = useRef(null);
+  let wasFocusedOnResizeStart = useRef(false);
   let editModeEnabled = state.tableState.isKeyboardNavigationDisabled;
 
   let {direction} = useLocale();
   let {keyboardProps} = useKeyboard({
     onKeyDown: (e) => {
-      let resizeOnFocus = !!triggerRef?.current;
       if (editModeEnabled) {
         if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ' || e.key === 'Tab') {
           e.preventDefault();
-          if (resizeOnFocus) {
-            // switch focus back to the column header on anything that ends edit mode
-            focusSafely(triggerRef.current);
-          } else {
-            endResize(item);
-            state.tableState.setKeyboardNavigationDisabled(false);
-          }
+          endResize(item);
         }
-      } else if (!resizeOnFocus) {
+      } else {
         // Continue propagation on keydown events so they still bubbles to useSelectableCollection and are handled there
         e.continuePropagation();
 
         if (e.key === 'Enter') {
           startResize(item);
-          state.tableState.setKeyboardNavigationDisabled(true);
         }
       }
     }
   });
 
-  let startResize = useCallback((item) => {
+  let startResize = useEffectEvent((item) => {
     if (!isResizingRef.current) {
       lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
       state.startResize(item.key);
+      state.tableState.setKeyboardNavigationDisabled(true);
       onResizeStart?.(lastSize.current);
     }
     isResizingRef.current = true;
-  }, [isResizingRef, onResizeStart, state]);
+  });
 
-  let resize = useCallback((item, newWidth) => {
+  let resize = useEffectEvent((item, newWidth) => {
     let sizes = state.updateResizedColumns(item.key, newWidth);
     onResize?.(sizes);
     lastSize.current = sizes;
-  }, [onResize, state]);
+  });
 
-  let endResize = useCallback((item) => {
+  let endResize = useEffectEvent((item) => {
     if (isResizingRef.current) {
       if (lastSize.current == null) {
         lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
       }
 
       state.endResize();
+      state.tableState.setKeyboardNavigationDisabled(false);
       onResizeEnd?.(lastSize.current);
+      isResizingRef.current = false;
+
+      if (triggerRef?.current && !wasFocusedOnResizeStart.current) {
+        // switch focus back to the column header unless the resizer was already focused when resizing started.
+        focusSafely(triggerRef.current);
+      }
     }
-    isResizingRef.current = false;
     lastSize.current = null;
-  }, [isResizingRef, onResizeEnd, state]);
+  });
 
   const columnResizeWidthRef = useRef<number>(0);
   const {moveProps} = useMove({
@@ -149,10 +148,9 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
       }
     },
     onMoveEnd(e) {
-      let resizeOnFocus = !!triggerRef?.current;
       let {pointerType} = e;
       columnResizeWidthRef.current = 0;
-      if (pointerType === 'mouse' || (pointerType === 'touch' && !resizeOnFocus)) {
+      if (pointerType === 'mouse' || (pointerType === 'touch' && wasFocusedOnResizeStart.current)) {
         endResize(item);
       }
     }
@@ -191,10 +189,24 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
 
   const focusInput = useCallback(() => {
     if (ref.current) {
-      focusWithoutScrolling(ref.current);
+      focusSafely(ref.current);
     }
   }, [ref]);
 
+  let resizingColumn = state.resizingColumn;
+  let prevResizingColumn = useRef(null);
+  useEffect(() => {
+    if (prevResizingColumn.current !== resizingColumn && resizingColumn != null && resizingColumn === item.key) {
+      wasFocusedOnResizeStart.current = document.activeElement === ref.current;
+      startResize(item);
+      focusInput();
+      // VoiceOver on iOS has problems focusing the input from a menu.
+      let timeout = setTimeout(focusInput, 400);
+      return () => clearTimeout(timeout);
+    }
+    prevResizingColumn.current = resizingColumn;
+  }, [resizingColumn, item, focusInput, ref, startResize]);
+
   let onChange = (e: ChangeEvent<HTMLInputElement>) => {
     let currentWidth = state.getColumnWidth(item.key);
     let nextValue = parseFloat(e.target.value);
@@ -213,11 +225,7 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
         return;
       }
       if (e.pointerType === 'virtual' && state.resizingColumn != null) {
-        let resizeOnFocus = !!triggerRef?.current;
         endResize(item);
-        if (resizeOnFocus) {
-          focusSafely(triggerRef.current);
-        }
         return;
       }
 
@@ -232,8 +240,7 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
       }
     },
     onPress: (e) => {
-      let resizeOnFocus = !!triggerRef?.current;
-      if (((e.pointerType === 'touch' && !resizeOnFocus) || e.pointerType === 'mouse') && state.resizingColumn != null) {
+      if (((e.pointerType === 'touch' && wasFocusedOnResizeStart.current) || e.pointerType === 'mouse') && state.resizingColumn != null) {
         endResize(item);
       }
     }
@@ -244,24 +251,15 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
     resizerProps: mergeProps(
       keyboardProps,
       {...moveProps, onKeyDown},
-      pressProps
+      pressProps,
+      {style: {touchAction: 'none'}}
     ),
     inputProps: mergeProps(
       visuallyHiddenProps,
       {
         id,
-        onFocus: () => {
-          let resizeOnFocus = !!triggerRef?.current;
-          if (resizeOnFocus) {
-            // useMove calls onMoveStart for every keypress, but we want resize start to only be called when we start resize mode
-            // call instead during focus and blur
-            startResize(item);
-            state.tableState.setKeyboardNavigationDisabled(true);
-          }
-        },
         onBlur: () => {
           endResize(item);
-          state.tableState.setKeyboardNavigationDisabled(false);
         },
         onChange,
         disabled: isDisabled

packages/@react-spectrum/overlays/src/Overlay.tsx

@@ -55,7 +55,7 @@ function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {
   }
 
   return (
-    <ReactAriaOverlay portalContainer={container} disableFocusManagement={disableFocusManagement}>
+    <ReactAriaOverlay portalContainer={container} disableFocusManagement={disableFocusManagement} isExiting={!isOpen}>
       <Provider ref={ref} UNSAFE_style={{background: 'transparent', isolation: 'isolate'}} isDisabled={false}>
         <OpenTransition
           in={isOpen}

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

@@ -47,7 +47,7 @@ const CURSORS = {
 
 function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement>) {
   let {column, showResizer} = props;
-  let {isEmpty, layout} = useTableContext();
+  let {isEmpty, layout, onFocusedResizer} = useTableContext();
   // Virtualizer re-renders, but these components are all cached
   // in order to get around that and cause a rerender here, we use context
   // but we don't actually need any value, they are available on the layout object
@@ -78,8 +78,7 @@ function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement>) {
   let {inputProps, resizerProps} = useTableColumnResize<unknown>(
     mergeProps(props, {
       'aria-label': stringFormatter.format('columnResizer'),
-      isDisabled: isEmpty,
-      shouldResizeOnFocus: true
+      isDisabled: isEmpty
     }), layout, ref);
 
   let isEResizable = layout.getColumnMinWidth(column.key) >= layout.getColumnWidth(column.key);
@@ -95,23 +94,23 @@ function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement>) {
   }
 
   let style = {
+    ...resizerProps.style,
     height: '100%',
     display: showResizer ? undefined : 'none',
-    touchAction: 'none',
     cursor
   };
 
   return (
     <>
       <FocusRing within focusRingClass={classNames(styles, 'focus-ring')}>
         <div
+          {...resizerProps}
           role="presentation"
           style={style}
-          className={classNames(styles, 'spectrum-Table-columnResizer')}
-          {...resizerProps}>
+          className={classNames(styles, 'spectrum-Table-columnResizer')}>
           <input
             ref={ref}
-            {...inputProps} />
+            {...mergeProps(inputProps, {onFocus: onFocusedResizer})} />
         </div>
       </FocusRing>
       {/* Placeholder so that the title doesn't intersect with space reserved by the resizer when it appears. */}