rough support for virtual focus taggroup

Author: LFDanLu

packages/@react-aria/autocomplete/src/useAutocomplete.ts

@@ -227,13 +227,20 @@ export function useAutocomplete(props: AriaAutocompleteOptions, state: Autocompl
       case 'PageDown':
       case 'PageUp':
       case 'ArrowUp':
-      case 'ArrowDown': {
+      case 'ArrowDown':
+      case 'ArrowLeft':
+      case 'ArrowRight':  {
         if ((e.key === 'Home' || e.key === 'End') && focusedNodeId == null && e.shiftKey) {
           return;
         }
 
         // Prevent these keys from moving the text cursor in the input
-        e.preventDefault();
+        // TODO: special case ArrowLeft/Right so they still do move the text cursor
+        // However, this should really depend on the primary wrapped component's layout orientation (aka maybe shouldn't happen if TagGroup?)
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+          e.preventDefault();
+        }
+
         // Move virtual focus into the wrapped collection
         let focusCollection = new CustomEvent(FOCUS_EVENT, {
           cancelable: true,

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

@@ -96,7 +96,12 @@ export interface AriaGridListOptions<T> extends Omit<AriaGridListProps<T>, 'chil
    * - 'override': links override all other interactions (link items are not selectable).
    * @default 'action'
    */
-  linkBehavior?: 'action' | 'selection' | 'override'
+  linkBehavior?: 'action' | 'selection' | 'override',
+  // TODO: double check if this should be in props or options, it was in options for menu
+  /**
+   * Whether the grid list items should use virtual focus instead of being focused directly.
+   */
+  shouldUseVirtualFocus?: boolean
 }
 
 export interface GridListAria {
@@ -121,7 +126,8 @@ export function useGridList<T>(props: AriaGridListOptions<T>, state: ListState<T
     linkBehavior = 'action',
     keyboardNavigationBehavior = 'arrow',
     escapeKeyBehavior = 'clearSelection',
-    shouldSelectOnPressUp
+    shouldSelectOnPressUp,
+    shouldUseVirtualFocus
   } = props;
 
   if (!props['aria-label'] && !props['aria-labelledby']) {
@@ -141,11 +147,12 @@ export function useGridList<T>(props: AriaGridListOptions<T>, state: ListState<T
     linkBehavior,
     disallowTypeAhead,
     autoFocus: props.autoFocus,
-    escapeKeyBehavior
+    escapeKeyBehavior,
+    shouldUseVirtualFocus
   });
 
   let id = useId(props.id);
-  listMap.set(state, {id, onAction, linkBehavior, keyboardNavigationBehavior, shouldSelectOnPressUp});
+  listMap.set(state, {id, onAction, linkBehavior, keyboardNavigationBehavior, shouldSelectOnPressUp, shouldUseVirtualFocus});
 
   let descriptionProps = useHighlightSelectionDescription({
     selectionManager: state.selectionManager,

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

@@ -67,7 +67,7 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
 
   // let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/gridlist');
   let {direction} = useLocale();
-  let {onAction, linkBehavior, keyboardNavigationBehavior, shouldSelectOnPressUp} = listMap.get(state)!;
+  let {onAction, linkBehavior, keyboardNavigationBehavior, shouldSelectOnPressUp, shouldUseVirtualFocus} = listMap.get(state)!;
   let descriptionId = useSlotId();
 
   // We need to track the key of the item at the time it was last focused so that we force
@@ -127,7 +127,8 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
     shouldSelectOnPressUp: props.shouldSelectOnPressUp || shouldSelectOnPressUp,
     onAction: onAction || node.props?.onAction ? chain(node.props?.onAction, onAction ? () => onAction(node.key) : undefined) : undefined,
     focus,
-    linkBehavior
+    linkBehavior,
+    shouldUseVirtualFocus
   });
 
   let onKeyDownCapture = (e: ReactKeyboardEvent) => {

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

@@ -18,7 +18,8 @@ interface ListMapShared {
   onAction?: (key: Key) => void,
   linkBehavior?: 'action' | 'selection' | 'override',
   keyboardNavigationBehavior: 'arrow' | 'tab',
-  shouldSelectOnPressUp?: boolean
+  shouldSelectOnPressUp?: boolean,
+  shouldUseVirtualFocus?: boolean
 }
 
 // Used to share:

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

@@ -78,6 +78,8 @@ export interface SelectableItemStates {
   isSelected: boolean,
   /** Whether the item is currently focused. */
   isFocused: boolean,
+  /** Whether the item is keyboard focused. */
+  isFocusVisible: boolean,
   /**
    * Whether the item is non-interactive, i.e. both selection and actions are disabled and the item may
    * not be focused. Dependent on `disabledKeys` and `disabledBehavior`.

packages/@react-aria/tag/src/useTag.ts

@@ -16,10 +16,10 @@ import {filterDOMProps, mergeProps, useDescription, useId, useSyntheticLinkProps
 import {hookData} from './useTagGroup';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {isFocusVisible, useFocusable, useInteractionModality} from '@react-aria/interactions';
 import {KeyboardEvent} from 'react';
 import type {ListState} from '@react-stately/list';
 import {SelectableItemStates} from '@react-aria/selection';
-import {useFocusable, useInteractionModality} from '@react-aria/interactions';
 import {useGridListItem} from '@react-aria/gridlist';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
@@ -113,6 +113,7 @@ export function useTag<T>(props: AriaTagProps<T>, state: ListState<T>, ref: RefO
       'aria-label': props['aria-label']
     }),
     ...stateWithoutDescription,
+    isFocusVisible: isItemFocused && state.selectionManager.isFocused && isFocusVisible(),
     allowsRemoving: !!onRemove
   };
 }

packages/@react-aria/tag/src/useTagGroup.ts

@@ -56,11 +56,17 @@ export interface AriaTagGroupOptions<T> extends Omit<AriaTagGroupProps<T>, 'chil
    * An optional keyboard delegate to handle arrow key navigation,
    * to override the default.
    */
-  keyboardDelegate?: KeyboardDelegate
+  keyboardDelegate?: KeyboardDelegate,
+  // TODO: double check if this should be in props or options, it was in options for menu
+  /**
+   * Whether the tags should use virtual focus instead of being focused directly.
+   */
+  shouldUseVirtualFocus?: boolean
 }
 
 interface HookData {
-  onRemove?: (keys: Set<Key>) => void
+  onRemove?: (keys: Set<Key>) => void,
+  shouldUseVirtualFocus?: boolean
 }
 
 export const hookData: WeakMap<ListState<any>, HookData> = new WeakMap<ListState<any>, HookData>();
@@ -86,6 +92,7 @@ export function useTagGroup<T>(props: AriaTagGroupOptions<T>, state: ListState<T
     ...props,
     labelElementType: 'span'
   });
+
   let {gridProps} = useGridList({
     ...props,
     ...fieldProps,
@@ -110,7 +117,7 @@ export function useTagGroup<T>(props: AriaTagGroupOptions<T>, state: ListState<T
     prevCount.current = state.collection.size;
   }, [state.collection.size, isFocusWithin, ref]);
 
-  hookData.set(state, {onRemove: props.onRemove});
+  hookData.set(state, {onRemove: props.onRemove, shouldUseVirtualFocus: props.shouldUseVirtualFocus});
 
   return {
     gridProps: mergeProps(gridProps, domProps, {

packages/react-aria-components/src/TagGroup.tsx

@@ -15,12 +15,12 @@ import {ButtonContext} from './Button';
 import {Collection, CollectionBuilder, createLeafComponent, ItemNode} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps, usePersistedKeys} from './Collection';
 import {ContextValue, DOMProps, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
-import {filterDOMProps, mergeProps, useObjectRef} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents} from '@react-types/shared';
 import {LabelContext} from './Label';
 import {ListState, Node, UNSTABLE_useFilteredListState, useListState} from 'react-stately';
 import {ListStateContext} from './ListBox';
-import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, RefObject, useContext, useEffect, useMemo, useRef} from 'react';
 import {TextContext} from './Text';
 import {UNSTABLE_InternalAutocompleteContext} from './Autocomplete';
 
@@ -75,10 +75,10 @@ interface TagGroupInnerProps {
 }
 
 function TagGroupInner({props, forwardedRef: ref, collection}: TagGroupInnerProps) {
-  let {filter, collectionProps} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  let {shouldUseVirtualFocus, disallowTypeAhead, ...DOMCollectionProps} = collectionProps || {};
+  let {filter, collectionProps, collectionRef} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
   let tagListRef = useRef<HTMLDivElement>(null);
+  // Memoed so that useAutocomplete callback ref is properly only called once on mount and not everytime a rerender happens
+  tagListRef = useObjectRef(useMemo(() => mergeRefs(tagListRef, collectionRef !== undefined ? collectionRef as RefObject<HTMLDivElement> : null), [collectionRef, tagListRef]));
   let [labelRef, label] = useSlot(
     !props['aria-label'] && !props['aria-labelledby']
   );
@@ -101,7 +101,7 @@ function TagGroupInner({props, forwardedRef: ref, collection}: TagGroupInnerProp
   } = useTagGroup({
     ...props,
     ...domPropOverrides,
-    ...DOMCollectionProps,
+    ...collectionProps,
     label
   }, filteredState, tagListRef);
 
@@ -211,7 +211,6 @@ export const Tag = /*#__PURE__*/ createLeafComponent(TagItemNode, (props: TagPro
   let ref = useObjectRef<HTMLDivElement>(forwardedRef);
   let {focusProps, isFocusVisible} = useFocusRing({within: false});
   let {rowProps, gridCellProps, removeButtonProps, ...states} = useTag({item}, state, ref);
-
   let {hoverProps, isHovered} = useHover({
     isDisabled: !states.allowsSelection,
     onHoverStart: item.props.onHoverStart,
@@ -226,7 +225,8 @@ export const Tag = /*#__PURE__*/ createLeafComponent(TagItemNode, (props: TagPro
     defaultClassName: 'react-aria-Tag',
     values: {
       ...states,
-      isFocusVisible,
+      // TODO: check if I can get rid of useFocusRing
+      isFocusVisible: isFocusVisible || states.isFocusVisible,
       isHovered,
       selectionMode: state.selectionManager.selectionMode,
       selectionBehavior: state.selectionManager.selectionBehavior
@@ -251,7 +251,7 @@ export const Tag = /*#__PURE__*/ createLeafComponent(TagItemNode, (props: TagPro
       data-disabled={states.isDisabled || undefined}
       data-hovered={isHovered || undefined}
       data-focused={states.isFocused || undefined}
-      data-focus-visible={isFocusVisible || undefined}
+      data-focus-visible={isFocusVisible || states.isFocusVisible || undefined}
       data-pressed={states.isPressed || undefined}
       data-allows-removing={states.allowsRemoving || undefined}
       data-selection-mode={state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode}>

packages/react-aria-components/stories/Autocomplete.stories.tsx

@@ -1059,14 +1059,14 @@ export const AutocompleteWithTagGroup = () => {
           <Label style={{display: 'block'}}>Test</Label>
           <Input />
         </TextField>
-        <TagGroup>
+        <TagGroup onRemove={action('onRemove')}>
           <Label>Categories</Label>
           <TagList style={{display: 'flex', gap: 4}}>
-            <MyTag href="https://nytimes.com">News</MyTag>
-            <MyTag>Travel</MyTag>
-            <MyTag>Gaming</MyTag>
+            <MyTag href="https://nytimes.com" textValue="News">News<Button slot="remove">X</Button></MyTag>
+            <MyTag textValue="Travel">Travel<Button slot="remove">X</Button></MyTag>
+            <MyTag textValue="Gaming">Gaming<Button slot="remove">X</Button></MyTag>
             <TooltipTrigger>
-              <MyTag>Shopping</MyTag>
+              <MyTag textValue="Shopping">Shopping<Button slot="remove">X</Button></MyTag>
               <Tooltip
                 offset={5}
                 style={{

packages/react-aria-components/stories/styles.css

@@ -398,3 +398,9 @@
     align-items: center
   }
 }
+
+:global(.react-aria-Tag) {
+  &[data-focus-visible] {
+    box-shadow: inset 0 0 0 2px slateblue;
+  }
+}