feat: TextFields in GridList and Grid

.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch

@@ -11,6 +11,19 @@ index 39a24b8f2ccdc52739d130480ab18975073616cb..0c3f5199401c15b90230c25a02de364e
              }
              UI.clearInitialValue(el);
          }
+diff --git a/dist/cjs/event/behavior/keydown.js b/dist/cjs/event/behavior/keydown.js
+index 55027cb256f66b808d17280dc01bc55a796a1032..993d5de5a838a711d7ae009344354772a42ed0c1 100644
+--- a/dist/cjs/event/behavior/keydown.js
++++ b/dist/cjs/event/behavior/keydown.js
+@@ -110,7 +110,7 @@ const keydownBehavior = {
+     },
+     Tab: (event, target, instance)=>{
+         return ()=>{
+-            const dest = getTabDestination.getTabDestination(target, instance.system.keyboard.modifiers.Shift);
++            const dest = getTabDestination.getTabDestination(document.activeElement, instance.system.keyboard.modifiers.Shift);
+             focus.focusElement(dest);
+             if (selection.hasOwnSelection(dest)) {
+                 UI.setUISelection(dest, {
 diff --git a/dist/cjs/utils/focus/getActiveElement.js b/dist/cjs/utils/focus/getActiveElement.js
 index d25f3a8ef67e856e43614559f73012899c0b53d7..4ed9ee45565ed438ee9284d8d3043c0bd50463eb 100644
 --- a/dist/cjs/utils/focus/getActiveElement.js

packages/@react-aria/grid/src/useGrid.ts

@@ -10,13 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMAttributes, DOMProps, Key, KeyboardDelegate, RefObject} from '@react-types/shared';
+import {AriaLabelingProps, BaseEvent, DOMAttributes, DOMProps, Key, KeyboardDelegate, RefObject} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useId} from '@react-aria/utils';
 import {GridCollection} from '@react-types/grid';
 import {GridKeyboardDelegate} from './GridKeyboardDelegate';
 import {gridMap} from './utils';
 import {GridState} from '@react-stately/grid';
-import {useCallback, useMemo} from 'react';
+import {KeyboardEvent, useCallback, useMemo} from 'react';
 import {useCollator, useLocale} from '@react-aria/i18n';
 import {useGridSelectionAnnouncement} from './useGridSelectionAnnouncement';
 import {useHasTabbableChild} from '@react-aria/focus';
@@ -64,7 +64,13 @@ export interface GridProps extends DOMProps, AriaLabelingProps {
    */
   escapeKeyBehavior?: 'clearSelection' | 'none',
   /** Whether selection should occur on press up instead of press down. */
-  shouldSelectOnPressUp?: boolean
+  shouldSelectOnPressUp?: boolean,
+  /**
+   * Whether keyboard navigation to focusable elements within grid list items is
+   * via the left/right arrow keys or the tab key.
+   * @default 'arrow'
+   */
+  keyboardNavigationBehavior?: 'arrow' | 'tab'
 }
 
 export interface GridAria {
@@ -90,7 +96,8 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
     onRowAction,
     onCellAction,
     escapeKeyBehavior = 'clearSelection',
-    shouldSelectOnPressUp
+    shouldSelectOnPressUp,
+    keyboardNavigationBehavior = 'arrow'
   } = props;
   let {selectionManager: manager} = state;
 
@@ -123,8 +130,45 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
     escapeKeyBehavior
   });
 
+
+  let originalOnKeyDown = collectionProps.onKeyDown;
+  let onKeyDown = useCallback((e: BaseEvent<KeyboardEvent<any>>) => {
+    if (keyboardNavigationBehavior === 'tab') {
+      if (e.target === ref.current
+        || (e.target as HTMLElement).getAttribute('role') === 'gridcell'
+        || (e.target as HTMLElement).getAttribute('role') === 'row'
+        || (e.target as HTMLElement).getAttribute('role') === 'presentation' // special case for gridlist thanks to redispatch of keyboard event by gridcell, theoretically no other presentation elements should get focus
+        || (e.target instanceof HTMLInputElement && (e.target as HTMLInputElement).getAttribute('type') === 'checkbox')
+        || e.key === 'Tab') {
+        originalOnKeyDown?.(e);
+      }
+    }
+    if (keyboardNavigationBehavior !== 'tab') {
+      originalOnKeyDown?.(e);
+    }
+  }, [originalOnKeyDown, keyboardNavigationBehavior, ref]);
+  collectionProps.onKeyDown = onKeyDown;
+
+  let originalOnKeyDownCapture = collectionProps.onKeyDownCapture;
+  let onKeyDownCapture = useCallback((e: BaseEvent<KeyboardEvent<any>>) => {
+    if (keyboardNavigationBehavior === 'tab') {
+      if (e.target === ref.current
+        || (e.target as HTMLElement).getAttribute('role') === 'gridcell'
+        || (e.target as HTMLElement).getAttribute('role') === 'row'
+        || (e.target as HTMLElement).getAttribute('role') === 'presentation' // special case for gridlist thanks to redispatch of keyboard event by gridcell, theoretically no other presentation elements should get focus
+        || (e.target instanceof HTMLInputElement && (e.target as HTMLInputElement).getAttribute('type') === 'checkbox')
+        || e.key === 'Tab') {
+        originalOnKeyDownCapture?.(e);
+      }
+    }
+    if (keyboardNavigationBehavior !== 'tab') {
+      originalOnKeyDownCapture?.(e);
+    }
+  }, [originalOnKeyDownCapture, keyboardNavigationBehavior, ref]);
+  collectionProps.onKeyDownCapture = onKeyDownCapture;
+
   let id = useId(props.id);
-  gridMap.set(state, {keyboardDelegate: delegate, actions: {onRowAction, onCellAction}, shouldSelectOnPressUp});
+  gridMap.set(state, {keyboardDelegate: delegate, keyboardNavigationBehavior, actions: {onRowAction, onCellAction}, shouldSelectOnPressUp});
 
   let descriptionProps = useHighlightSelectionDescription({
     selectionManager: manager,

packages/@react-aria/grid/src/useGridCell.ts

@@ -13,7 +13,7 @@
 import {DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shared';
 import {focusSafely, isFocusVisible} from '@react-aria/interactions';
 import {getFocusableTreeWalker} from '@react-aria/focus';
-import {getScrollParent, mergeProps, scrollIntoViewport} from '@react-aria/utils';
+import {getScrollParent, isFocusable, mergeProps, scrollIntoViewport} from '@react-aria/utils';
 import {GridCollection, GridNode} from '@react-types/grid';
 import {gridMap} from './utils';
 import {GridState} from '@react-stately/grid';
@@ -62,7 +62,10 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
   } = props;
 
   let {direction} = useLocale();
-  let {keyboardDelegate, actions: {onCellAction}} = gridMap.get(state)!;
+  let {keyboardDelegate, keyboardNavigationBehavior, actions: {onCellAction}} = gridMap.get(state)!;
+  if (keyboardNavigationBehavior === 'tab') {
+    focusMode = 'cell';
+  }
 
   // We need to track the key of the item at the time it was last focused so that we force
   // focus to go to the item when the DOM node is reused for a different item in a virtualizer.
@@ -113,6 +116,10 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
       return;
     }
 
+    if (keyboardNavigationBehavior === 'tab' && e.target !== ref.current) {
+      return;
+    }
+
     let walker = getFocusableTreeWalker(ref.current);
     walker.currentNode = document.activeElement;
 
@@ -171,7 +178,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
           ? walker.previousNode() as FocusableElement
           : walker.nextNode() as FocusableElement;
 
-        if (focusMode === 'child' && focusable === ref.current) {
+        if ((focusMode === 'child' && focusable === ref.current) || (keyboardNavigationBehavior === 'tab')) {
           focusable = null;
         }
 
@@ -186,6 +193,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
             // We prevent the capturing event from reaching children of the cell, e.g. pickers.
             // We want arrow keys to navigate to the next cell instead. We need to re-dispatch
             // the event from a higher parent so it still bubbles and gets handled by useSelectableCollection.
+            // Note: This may dispatch on something that isn't the cell nor the row, so we will need to handle that in useGrid.
             ref.current.parentElement?.dispatchEvent(
               new KeyboardEvent(e.nativeEvent.type, e.nativeEvent)
             );
@@ -224,6 +232,48 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
     }
   };
 
+  let onKeyDown = (e) => {
+    if (!e.currentTarget.contains(e.target as Element) || !ref.current || !document.activeElement) {
+      return;
+    }
+
+    switch (e.key) {
+      case 'Tab': {
+        if (keyboardNavigationBehavior === 'tab') {
+          // If there is another focusable element within this item, stop propagation so the tab key
+          // is handled by the browser and not by useSelectableCollection (which would take us out of the list).
+          let walker = getFocusableTreeWalker(ref.current, {tabbable: true});
+          walker.currentNode = document.activeElement;
+          let next = e.shiftKey ? walker.previousNode() : walker.nextNode();
+
+          if (next) {
+            e.stopPropagation();
+          }
+        }
+      }
+    }
+  };
+
+  // Prevent pressing space to select the row.
+  let originalOnKeyDown = itemProps.onKeyDown;
+  itemProps.onKeyDown = (e) => {
+    if (keyboardNavigationBehavior === 'tab' && e.key === ' ' && e.target !== ref.current) {
+      e.stopPropagation();
+      return;
+    }
+    originalOnKeyDown?.(e);
+  };
+
+  // Prevent clicking on a focusable element from selecting the row.
+  let originalPointerDown = itemProps.onPointerDown;
+  itemProps.onPointerDown = (e) => {
+    if (keyboardNavigationBehavior === 'tab' && isFocusable(e.target as Element) && e.target !== ref.current) {
+      e.stopPropagation();
+      return;
+    }
+    originalPointerDown?.(e);
+  };
+
   // Grid cells can have focusable elements inside them. In this case, focus should
   // be marshalled to that element rather than focusing the cell itself.
   let onFocus = (e) => {
@@ -253,6 +303,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
   let gridCellProps: DOMAttributes = mergeProps(itemProps, {
     role: 'gridcell',
     onKeyDownCapture,
+    onKeyDown,
     'aria-colspan': node.colSpan,
     'aria-colindex': node.colIndex != null ? node.colIndex + 1 : undefined, // aria-colindex is 1-based
     colSpan: isVirtualized ? undefined : node.colSpan,

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

@@ -16,6 +16,7 @@ import type {Key, KeyboardDelegate} from '@react-types/shared';
 
 interface GridMapShared {
   keyboardDelegate: KeyboardDelegate,
+  keyboardNavigationBehavior: 'arrow' | 'tab',
   actions: {
     onRowAction?: (key: Key) => void,
     onCellAction?: (key: Key) => void

packages/@react-aria/gridlist/src/useGridList.ts

@@ -12,6 +12,7 @@
 
 import {
   AriaLabelingProps,
+  BaseEvent,
   CollectionBase,
   DisabledBehavior,
   DOMAttributes,
@@ -24,6 +25,7 @@ import {
   RefObject
 } from '@react-types/shared';
 import {filterDOMProps, mergeProps, useId} from '@react-aria/utils';
+import {KeyboardEvent, useCallback} from 'react';
 import {listMap} from './utils';
 import {ListState} from '@react-stately/list';
 import {useGridSelectionAnnouncement, useHighlightSelectionDescription} from '@react-aria/grid';
@@ -144,6 +146,38 @@ export function useGridList<T>(props: AriaGridListOptions<T>, state: ListState<T
     escapeKeyBehavior
   });
 
+  let originalOnKeyDown = listProps.onKeyDown;
+  let onKeyDown = useCallback((e: BaseEvent<KeyboardEvent<any>>) => {
+    if (keyboardNavigationBehavior === 'tab') {
+      if (e.target === ref.current
+        || (e.target as HTMLElement).getAttribute('role') === 'gridcell'
+        || (e.target as HTMLElement).getAttribute('role') === 'row'
+        || e.key === 'Tab') {
+        originalOnKeyDown?.(e);
+      }
+    }
+    if (keyboardNavigationBehavior !== 'tab') {
+      originalOnKeyDown?.(e);
+    }
+  }, [originalOnKeyDown, keyboardNavigationBehavior, ref]);
+  listProps.onKeyDown = onKeyDown;
+
+  let originalOnKeyDownCapture = listProps.onKeyDownCapture;
+  let onKeyDownCapture = useCallback((e: BaseEvent<KeyboardEvent<any>>) => {
+    if (keyboardNavigationBehavior === 'tab') {
+      if (e.target === ref.current
+        || (e.target as HTMLElement).getAttribute('role') === 'gridcell'
+        || (e.target as HTMLElement).getAttribute('role') === 'row'
+        || e.key === 'Tab') {
+        originalOnKeyDownCapture?.(e);
+      }
+    }
+    if (keyboardNavigationBehavior !== 'tab') {
+      originalOnKeyDownCapture?.(e);
+    }
+  }, [originalOnKeyDownCapture, keyboardNavigationBehavior, ref]);
+  listProps.onKeyDownCapture = onKeyDownCapture;
+
   let id = useId(props.id);
   listMap.set(state, {id, onAction, linkBehavior, keyboardNavigationBehavior, shouldSelectOnPressUp});
 

packages/@react-aria/gridlist/src/useGridListItem.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {chain, getScrollParent, mergeProps, scrollIntoViewport, useSlotId, useSyntheticLinkProps} from '@react-aria/utils';
+import {chain, getScrollParent, isFocusable, mergeProps, scrollIntoViewport, useSlotId, useSyntheticLinkProps} from '@react-aria/utils';
 import {DOMAttributes, FocusableElement, Key, RefObject, Node as RSNode} from '@react-types/shared';
 import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
 import {getRowId, listMap} from './utils';
@@ -135,6 +135,10 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
       return;
     }
 
+    if (keyboardNavigationBehavior === 'tab' && e.target !== ref.current) {
+      return;
+    }
+
     let walker = getFocusableTreeWalker(ref.current);
     walker.currentNode = document.activeElement;
 
@@ -227,22 +231,6 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
     }
   };
 
-  let onFocus = (e) => {
-    keyWhenFocused.current = node.key;
-    if (e.target !== ref.current) {
-      // useSelectableItem only handles setting the focused key when
-      // the focused element is the row itself. We also want to
-      // set the focused key when a child element receives focus.
-      // If focus is currently visible (e.g. the user is navigating with the keyboard),
-      // then skip this. We want to restore focus to the previously focused row
-      // in that case since the list should act like a single tab stop.
-      if (!isFocusVisible()) {
-        state.selectionManager.setFocusedKey(node.key);
-      }
-      return;
-    }
-  };
-
   let onKeyDown = (e) => {
     if (!e.currentTarget.contains(e.target as Element) || !ref.current || !document.activeElement) {
       return;
@@ -265,6 +253,42 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
     }
   };
 
+  // Prevent pressing space to select the row.
+  let originalOnKeyDown = itemProps.onKeyDown;
+  itemProps.onKeyDown = (e) => {
+    if (keyboardNavigationBehavior === 'tab' && e.key === ' ' && e.target !== ref.current) {
+      e.stopPropagation();
+      return;
+    }
+    originalOnKeyDown?.(e);
+  };
+
+  // Prevent clicking on a focusable element from selecting the row.
+  let originalPointerDown = itemProps.onPointerDown;
+  itemProps.onPointerDown = (e) => {
+    if (keyboardNavigationBehavior === 'tab' && isFocusable(e.target as Element) && e.target !== ref.current) {
+      e.stopPropagation();
+      return;
+    }
+    originalPointerDown?.(e);
+  };
+
+  let onFocus = (e) => {
+    keyWhenFocused.current = node.key;
+    if (e.target !== ref.current) {
+      // useSelectableItem only handles setting the focused key when
+      // the focused element is the row itself. We also want to
+      // set the focused key when a child element receives focus.
+      // If focus is currently visible (e.g. the user is navigating with the keyboard),
+      // then skip this. We want to restore focus to the previously focused row
+      // in that case since the list should act like a single tab stop.
+      if (!isFocusVisible()) {
+        state.selectionManager.setFocusedKey(node.key);
+      }
+      return;
+    }
+  };
+
   let syntheticLinkProps = useSyntheticLinkProps(node.props);
   let linkProps = itemStates.hasAction ? syntheticLinkProps : {};
   // TODO: re-add when we get translations and fix this for iOS VO

packages/@react-spectrum/list/test/ListViewDnd.test.js

@@ -2425,7 +2425,6 @@ describe('ListView', function () {
 
           tree.rerender(<DragBetweenListsComplex secondListDnDOptions={{...mockUtilityOptions, onRootDrop: null, onInsert: null}} />);
           await user.tab({shift: true});
-          await user.tab({shift: true});
           await beginDrag(tree);
           await user.tab();
           // Should automatically jump to the folder target since we didn't provide onRootDrop and onInsert