feat: Add subdialog support to Menu and Autocomplete (#7561)

* rough start

* fix contain

* debug ESC handler

* fix rendering of subdialog in autocomplete

* debug dynamic case and fix context

* handle submenutriggers in base collection filtering and fix id issue for trigger

* prevent focus from being lost to the body when submenutrigger is virtually focused

typically submenus dont have focus restore turned on since it would move focus manually back to the trigger when keyboard closing the menu. However, we cant move focus to virtually focused triggers so enable focus restore on the submenu in these cases

* ensure that the focused subdialogtrigger item remains focused after opening and closing the subdialog

* close submenu when virtual focus moves off trigger and properly dispatch events to the temporarily cleared focus item

the second part of this message refers to the following flow: over submenu via hover in autocomplete, use arrowLeft to close it and then try to reopen it via arrowRight

* fix hover for now so I can debug the focus issues

* fix tab handling in subdialogs and opening submenus on mobile when using virtual focus

* Fix to close submenus/dialogs when in a Autocomplete that isnt in a popover itself

* fix issue where you cant shift tab from the Autocompletes text field

* fix shift tabbing from closing the subdialogs when rendered by Autocomplete menu

* make sure expanded triggers dont have visible focus ring

* fix all subdialog being closed when using ESC on a subMenuTrigger and partial fix for only closing submenu via ESC if opened from sub dialog

this defers ESC handling to the menu/dialog at all times. The previous bug 3f8e6e0 seems to not happen anymore

* update mobile screen reader behavior so focus is restored to the subtrigger when dimissing the submenu/dialog

also subdialog component renaming from team discussion and adding enterkeyhint for autocomplete

* only close outer most submenu/subdialog when using ESC

for consistency between a chain of submenus and a mixed chain of submenus/subdialogs. This is consistent with Windows as well, but not with MacOS

* partial fix to only persist a single focus ring on item or input for virtual focus

* Making focus ring appear on virtually focused items and on input field if none exist

Applies to virtual focus menus and listboxes. Only affects RAC for now

* simplifiying useSelectableItem change in favor of proper manager.isFocused tracking

this includes a fix to where hovering an adjacent item to close a open submenu in an autocomplete wasnt making the hovered item properly focused

* saving point for tests

* Fix focusscope for subdialogs and add test

* Fix S2 autocomplete double focus ring

* adding tests for subdialog and testing useInteractOutside for subdialogs again

* add submenu tests

* fix ESC closing multiple levels of subdialogs/menus due to collection event leak

to test, open a subdialog with auto complete -> submenu -> subdialog with autocomplete and hits ESC

* hack around react 16 failures for now

* fix lint

* fix react 16, close menu on hovering different item

* fixing lint

* wip: refactor to fire fake focus/blur events

* fix more

* implement keepVisible for non-modal popovers

* refactor

* update lock

* lint

* fix 16

* fix test

* Clear MenuContext in SubDialog

Otherwise menus in SubDialogs inside SubMenus will also handle keyboard events, resulting in multiple levels closing at once

* Fix dismiss on interact outside

* Use focusedNodeId ref for keyboard handlers to avoid race condition

* refactor listbox filtering to support usage inside Select

* Make sure props are sent to the right elements

* fix RSP

* cleanup

* fix react 16/17

* Revert "fix react 16/17"

This reverts commit e03daa4.

* Revert "fix RSP"

This reverts commit 77148f5.

* Revert "Fix dismiss on interact outside"

This reverts commit f6b7272.

* Fix interact outside for RAC submenu/subdialogs specifically

* revert dialog change

* more cleanup

* Use getActiveElement utility

* focus input when clicking on collection

* fix merge

* Refactor left/right arrow key behavior to be less menu specific

* Remove onDismissButtonPress for now

Can't reproduce original issue anymore

* lint

---------

Co-authored-by: Devon Govett <[email protected]>

Author: LFDanLu

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

@@ -0,0 +1,26 @@
+diff --git a/dist/cjs/document/prepareDocument.js b/dist/cjs/document/prepareDocument.js
+index 39a24b8f2ccdc52739d130480ab18975073616cb..0c3f5199401c15b90230c25a02de364eeef3e297 100644
+--- a/dist/cjs/document/prepareDocument.js
++++ b/dist/cjs/document/prepareDocument.js
+@@ -30,7 +30,7 @@ function prepareDocument(document) {
+         const initialValue = UI.getInitialValue(el);
+         if (initialValue !== undefined) {
+             if (el.value !== initialValue) {
+-                dispatchEvent.dispatchDOMEvent(el, 'change');
++                el.dispatchEvent(new Event('change'));
+             }
+             UI.clearInitialValue(el);
+         }
+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
++++ b/dist/cjs/utils/focus/getActiveElement.js
+@@ -6,6 +6,8 @@ function getActiveElement(document) {
+     const activeElement = document.activeElement;
+     if (activeElement === null || activeElement === undefined ? undefined : activeElement.shadowRoot) {
+         return getActiveElement(activeElement.shadowRoot);
++    } else if (activeElement && activeElement.tagName === 'IFRAME') {
++        return getActiveElement(activeElement.contentWindow.document);
+     } else {
+         // Browser does not yield disabled elements as document.activeElement - jsdom does
+         if (isDisabled.isDisabled(activeElement)) {

package.json

@@ -126,7 +126,7 @@
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.6.1",
+    "@testing-library/user-event": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch",
     "@types/react": "npm:[email protected]",
     "@types/react-dom": "npm:[email protected]",
     "@types/storybook__react": "^4.0.2",
@@ -234,7 +234,8 @@
     "@types/react-dom": "npm:[email protected]",
     "recast": "0.23.6",
     "ast-types": "0.16.1",
-    "svgo": "^3"
+    "svgo": "^3",
+    "@testing-library/user-event@npm:^14.4.0": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch"
   },
   "@parcel/transformer-css": {
     "cssModules": {

packages/@react-aria/autocomplete/package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@react-aria/combobox": "^3.11.1",
+    "@react-aria/focus": "^3.19.1",
     "@react-aria/i18n": "^3.12.5",
     "@react-aria/interactions": "^3.23.0",
     "@react-aria/listbox": "^3.14.0",

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

@@ -13,10 +13,12 @@
 import {AriaLabelingProps, BaseEvent, DOMProps, RefObject} from '@react-types/shared';
 import {AriaTextFieldProps} from '@react-aria/textfield';
 import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete';
-import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, isCtrlKeyPressed, mergeProps, mergeRefs, UPDATE_ACTIVEDESCENDANT, useEffectEvent, useId, useLabels, useObjectRef} from '@react-aria/utils';
+import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isCtrlKeyPressed, mergeProps, mergeRefs, useEffectEvent, useId, useLabels, useObjectRef} from '@react-aria/utils';
+import {dispatchVirtualBlur, dispatchVirtualFocus, moveVirtualFocus} from '@react-aria/focus';
+import {getInteractionModality} from '@react-aria/interactions';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo, useRef} from 'react';
+import React, {FocusEvent as ReactFocusEvent, KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo, useRef} from 'react';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface CollectionOptions extends DOMProps, AriaLabelingProps {
@@ -34,6 +36,8 @@ export interface AriaAutocompleteProps extends AutocompleteProps {
 }
 
 export interface AriaAutocompleteOptions extends Omit<AriaAutocompleteProps, 'children'> {
+  /** The ref for the wrapped collection element. */
+  inputRef: RefObject<HTMLInputElement | null>,
   /** The ref for the wrapped collection element. */
   collectionRef: RefObject<HTMLElement | null>
 }
@@ -57,36 +61,49 @@ export interface AutocompleteAria {
  */
 export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state: AutocompleteState): AutocompleteAria {
   let {
+    inputRef,
     collectionRef,
     filter
   } = props;
 
   let collectionId = useId();
   let timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   let delayNextActiveDescendant = useRef(false);
-  let queuedActiveDescendant = useRef(null);
+  let queuedActiveDescendant = useRef<string | null>(null);
   let lastCollectionNode = useRef<HTMLElement>(null);
 
-  let updateActiveDescendant = useEffectEvent((e) => {
-    let {target} = e;
-    if (queuedActiveDescendant.current === target.id) {
-      return;
+  // For mobile screen readers, we don't want virtual focus, instead opting to disable FocusScope's restoreFocus and manually
+  // moving focus back to the subtriggers
+  let shouldUseVirtualFocus = getInteractionModality() !== 'virtual';
+
+  useEffect(() => {
+    return () => clearTimeout(timeout.current);
+  }, []);
+
+  let updateActiveDescendant = useEffectEvent((e: Event) => {
+    // Ensure input is focused if the user clicks on the collection directly.
+    if (!e.isTrusted && shouldUseVirtualFocus && inputRef.current && getActiveElement(getOwnerDocument(inputRef.current)) !== inputRef.current) {
+      inputRef.current.focus();
     }
 
+    let target = e.target as Element | null;
+    if (e.isTrusted || !target || queuedActiveDescendant.current === target.id) {
+      return;
+    }
+    
     clearTimeout(timeout.current);
-    e.stopPropagation();
-
     if (target !== collectionRef.current) {
       if (delayNextActiveDescendant.current) {
         queuedActiveDescendant.current = target.id;
         timeout.current = setTimeout(() => {
           state.setFocusedNodeId(target.id);
-          queuedActiveDescendant.current = null;
         }, 500);
       } else {
+        queuedActiveDescendant.current = target.id;
         state.setFocusedNodeId(target.id);
       }
     } else {
+      queuedActiveDescendant.current = null;
       state.setFocusedNodeId(null);
     }
 
@@ -96,14 +113,14 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
   let callbackRef = useCallback((collectionNode) => {
     if (collectionNode != null) {
       // When typing forward, we want to delay the setting of active descendant to not interrupt the native screen reader announcement
-      // of the letter you just typed. If we recieve another UPDATE_ACTIVEDESCENDANT call then we clear the queued update
+      // of the letter you just typed. If we recieve another focus event then we clear the queued update
       // We track lastCollectionNode to do proper cleanup since callbackRefs just pass null when unmounting. This also handles
       // React 19's extra call of the callback ref in strict mode
-      lastCollectionNode.current?.removeEventListener(UPDATE_ACTIVEDESCENDANT, updateActiveDescendant);
+      lastCollectionNode.current?.removeEventListener('focusin', updateActiveDescendant);
       lastCollectionNode.current = collectionNode;
-      collectionNode.addEventListener(UPDATE_ACTIVEDESCENDANT, updateActiveDescendant);
+      collectionNode.addEventListener('focusin', updateActiveDescendant);
     } else {
-      lastCollectionNode.current?.removeEventListener(UPDATE_ACTIVEDESCENDANT, updateActiveDescendant);
+      lastCollectionNode.current?.removeEventListener('focusin', updateActiveDescendant);
     }
   }, [updateActiveDescendant]);
 
@@ -123,11 +140,16 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
     );
   });
 
-  let clearVirtualFocus = useEffectEvent(() => {
+  let clearVirtualFocus = useEffectEvent((clearFocusKey?: boolean) => {
+    moveVirtualFocus(getActiveElement());
+    queuedActiveDescendant.current = null;
     state.setFocusedNodeId(null);
     let clearFocusEvent = new CustomEvent(CLEAR_FOCUS_EVENT, {
       cancelable: true,
-      bubbles: true
+      bubbles: true,
+      detail: {
+        clearFocusKey
+      }
     });
     clearTimeout(timeout.current);
     delayNextActiveDescendant.current = false;
@@ -141,7 +163,8 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
     if (state.inputValue !== value && state.inputValue.length <= value.length) {
       focusFirstItem();
     } else {
-      clearVirtualFocus();
+      // Fully clear focused key when backspacing since the list may change and thus we'd want to start fresh again
+      clearVirtualFocus(true);
     }
 
     state.setInputValue(value);
@@ -155,6 +178,7 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
       return;
     }
 
+    let focusedNodeId = queuedActiveDescendant.current;
     switch (e.key) {
       case 'a':
         if (isCtrlKeyPressed(e)) {
@@ -185,7 +209,7 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
       case 'PageUp':
       case 'ArrowUp':
       case 'ArrowDown': {
-        if ((e.key === 'Home' || e.key === 'End') && state.focusedNodeId == null && e.shiftKey) {
+        if ((e.key === 'Home' || e.key === 'End') && focusedNodeId == null && e.shiftKey) {
           return;
         }
 
@@ -200,13 +224,6 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
         collectionRef.current?.dispatchEvent(focusCollection);
         break;
       }
-      case 'ArrowLeft':
-      case 'ArrowRight':
-        // TODO: will need to special case this so it doesn't clear the focused key if we are currently
-        // focused on a submenutrigger? May not need to since focus would
-        // But what about wrapped grids where ArrowLeft and ArrowRight should navigate left/right
-        clearVirtualFocus();
-        break;
     }
 
     // Emulate the keyboard events that happen in the input field in the wrapped collection. This is for triggering things like onAction via Enter
@@ -217,15 +234,28 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
       e.stopPropagation();
     }
 
-    if (state.focusedNodeId == null) {
-      collectionRef.current?.dispatchEvent(
+    let shouldPerformDefaultAction = true;
+    if (focusedNodeId == null) {
+      shouldPerformDefaultAction = collectionRef.current?.dispatchEvent(
         new KeyboardEvent(e.nativeEvent.type, e.nativeEvent)
-      );
+      ) || false;
     } else {
-      let item = document.getElementById(state.focusedNodeId);
-      item?.dispatchEvent(
+      let item = document.getElementById(focusedNodeId);
+      shouldPerformDefaultAction = item?.dispatchEvent(
         new KeyboardEvent(e.nativeEvent.type, e.nativeEvent)
-      );
+      ) || false;
+    }
+    
+    if (shouldPerformDefaultAction) {
+      switch (e.key) {
+        case 'ArrowLeft':
+        case 'ArrowRight': {
+          // Clear the activedescendant so NVDA announcements aren't interrupted but retain the focused key in the collection so the
+          // user's keyboard navigation restarts from where they left off
+          clearVirtualFocus();
+          break;
+        }
+      }
     }
   };
 
@@ -235,12 +265,13 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
     // is detected by usePress instead of the original keyup originating from the input
     if (e.target === keyDownTarget.current) {
       e.stopImmediatePropagation();
-      if (state.focusedNodeId == null) {
+      let focusedNodeId = queuedActiveDescendant.current;
+      if (focusedNodeId == null) {
         collectionRef.current?.dispatchEvent(
           new KeyboardEvent(e.type, e)
         );
       } else {
-        let item = document.getElementById(state.focusedNodeId);
+        let item = document.getElementById(focusedNodeId);
         item?.dispatchEvent(
           new KeyboardEvent(e.type, e)
         );
@@ -269,6 +300,34 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
     return true;
   }, [state.inputValue, filter]);
 
+  // Be sure to clear/restore the virtual + collection focus when blurring/refocusing the field so we only show the
+  // focus ring on the virtually focused collection when are actually interacting with the Autocomplete
+  let onBlur = (e: ReactFocusEvent) => {
+    if (!e.isTrusted) {
+      return;
+    }
+
+    let lastFocusedNode = queuedActiveDescendant.current ? document.getElementById(queuedActiveDescendant.current) : null;
+    if (lastFocusedNode) {
+      dispatchVirtualBlur(lastFocusedNode, e.relatedTarget);
+    }
+  };
+
+  let onFocus = (e: ReactFocusEvent) => {
+    if (!e.isTrusted) {
+      return;
+    }
+
+    let curFocusedNode = queuedActiveDescendant.current ? document.getElementById(queuedActiveDescendant.current) : null;
+    if (curFocusedNode) {
+      let target = e.target;
+      queueMicrotask(() => {
+        dispatchVirtualBlur(target, curFocusedNode);
+        dispatchVirtualFocus(curFocusedNode, target);
+      });
+    }
+  };
+
   return {
     textFieldProps: {
       value: state.inputValue,
@@ -283,11 +342,13 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
       // This disable's iOS's autocorrect suggestions, since the autocomplete provides its own suggestions.
       autoCorrect: 'off',
       // This disable's the macOS Safari spell check auto corrections.
-      spellCheck: 'false'
+      spellCheck: 'false',
+      [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: 'enter',
+      onBlur,
+      onFocus
     },
     collectionProps: mergeProps(collectionProps, {
-      // TODO: shouldFocusOnHover? shouldFocusWrap? Should it be up to the wrapped collection?
-      shouldUseVirtualFocus: true,
+      shouldUseVirtualFocus,
       disallowTypeAhead: true
     }),
     collectionRef: mergedCollectionRef,

packages/@react-aria/collections/src/BaseCollection.ts

@@ -228,7 +228,7 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
         let clonedSection: Mutable<CollectionNode<T>> = (node as CollectionNode<T>).clone();
         let lastChildInSection: Mutable<CollectionNode<T>> | null = null;
         for (let child of this.getChildren(node.key)) {
-          if (filterFn(child.textValue) || child.type === 'header') {
+          if (shouldKeepNode(child, filterFn, this, newCollection)) {
             let clonedChild: Mutable<CollectionNode<T>> = (child as CollectionNode<T>).clone();
             // eslint-disable-next-line max-depth
             if (lastChildInSection == null) {
@@ -288,22 +288,25 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
           lastNode = clonedSeparator;
           newCollection.addNode(clonedSeparator);
         }
-      } else if (filterFn(node.textValue)) {
+      } else {
+        // At this point, the node is either a subdialogtrigger node or a standard row/item
         let clonedNode: Mutable<CollectionNode<T>> = (node as CollectionNode<T>).clone();
-        if (newCollection.firstKey == null) {
-          newCollection.firstKey = clonedNode.key;
-        }
+        if (shouldKeepNode(clonedNode, filterFn, this, newCollection)) {
+          if (newCollection.firstKey == null) {
+            newCollection.firstKey = clonedNode.key;
+          }
 
-        if (lastNode != null && (lastNode.type !== 'section' && lastNode.type !== 'separator') && lastNode.parentKey === clonedNode.parentKey) {
-          lastNode.nextKey = clonedNode.key;
-          clonedNode.prevKey = lastNode.key;
-        } else {
-          clonedNode.prevKey = null;
-        }
+          if (lastNode != null && (lastNode.type !== 'section' && lastNode.type !== 'separator') && lastNode.parentKey === clonedNode.parentKey) {
+            lastNode.nextKey = clonedNode.key;
+            clonedNode.prevKey = lastNode.key;
+          } else {
+            clonedNode.prevKey = null;
+          }
 
-        clonedNode.nextKey = null;
-        newCollection.addNode(clonedNode);
-        lastNode = clonedNode;
+          clonedNode.nextKey = null;
+          newCollection.addNode(clonedNode);
+          lastNode = clonedNode;
+        }
       }
     }
 
@@ -322,3 +325,22 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
     return newCollection;
   }
 }
+
+function shouldKeepNode<T>(node: Node<T>, filterFn: (nodeValue: string) => boolean, oldCollection: BaseCollection<T>, newCollection: BaseCollection<T>): boolean {
+  if (node.type === 'subdialogtrigger' || node.type === 'submenutrigger') {
+    // Subdialog wrapper should only have one child, if it passes the filter add it to the new collection since we don't need to
+    // do any extra handling for its first/next key
+    let triggerChild = [...oldCollection.getChildren(node.key)][0];
+    if (triggerChild && filterFn(triggerChild.textValue)) {
+      let clonedChild: Mutable<CollectionNode<T>> = (triggerChild as CollectionNode<T>).clone();
+      newCollection.addNode(clonedChild);
+      return true;
+    } else {
+      return false;
+    }
+  } else if (node.type === 'header') {
+    return true;
+  } else {
+    return filterFn(node.textValue);
+  }
+}

packages/@react-aria/dialog/src/useDialog.ts

@@ -30,7 +30,9 @@ export interface DialogAria {
  * A dialog is an overlay shown above other content in an application.
  */
 export function useDialog(props: AriaDialogProps, ref: RefObject<FocusableElement | null>): DialogAria {
-  let {role = 'dialog'} = props;
+  let {
+    role = 'dialog'
+  } = props;
   let titleId: string | undefined = useSlotId();
   titleId = props['aria-label'] ? undefined : titleId;