fix: allow user to move into Autocomplete wrapped 2d grid via ArrowLeft/Right (adobe#9755)

also prevents internally tracked focused key from sticking if the inner collection of a Autocomplete is switched/changed to another collection

Author: LFDanLu

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

@@ -231,6 +231,14 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
     }
 
     let focusedNodeId = queuedActiveDescendant.current;
+    if (focusedNodeId !== null && getOwnerDocument(inputRef.current).getElementById(focusedNodeId) == null) {
+      // if the focused id doesn't exist in document, then we need to clear the tracked focused node, otherwise
+      // we will be attempting to fire key events on a non-existing node instead of trying to focus the newly swapped wrapped collection.
+      // This can happen if you are swapping out the Autocomplete wrapped collection component like in the docs search.
+      queuedActiveDescendant.current = null;
+      focusedNodeId = null;
+    }
+
     switch (e.key) {
       case 'a':
         if (isCtrlKeyPressed(e)) {
@@ -260,11 +268,28 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
       case 'PageDown':
       case 'PageUp':
       case 'ArrowUp':
-      case 'ArrowDown': {
+      case 'ArrowDown':
+      case 'ArrowRight':
+      case 'ArrowLeft': {
         if ((e.key === 'Home' || e.key === 'End') && focusedNodeId == null && e.shiftKey) {
           return;
         }
 
+        // If there is text within the input field, we'll want continue propagating events down
+        // to the wrapped collection if there is a focused node so that a user can continue moving the
+        // virtual focus. However, if the user doesn't have a focus in the collection, just move the text
+        // cursor instead. They can move focus down into the collection via down/up arrow if need be
+        if ((e.key === 'ArrowRight' || e.key === 'ArrowLeft') && state.inputValue.length > 0) {
+          if (focusedNodeId == null) {
+            if (!e.isPropagationStopped()) {
+              e.stopPropagation();
+            }
+            return;
+          }
+
+          break;
+        }
+
         // Prevent these keys from moving the text cursor in the input
         e.preventDefault();
         // Move virtual focus into the wrapped collection

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

@@ -201,7 +201,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       }
       case 'ArrowLeft': {
         if (delegate.getKeyLeftOf) {
-          let nextKey: Key | undefined | null = manager.focusedKey != null ? delegate.getKeyLeftOf?.(manager.focusedKey) : null;
+          let nextKey: Key | undefined | null = manager.focusedKey != null ? delegate.getKeyLeftOf?.(manager.focusedKey) : delegate.getFirstKey?.();
           if (nextKey == null && shouldFocusWrap) {
             nextKey = direction === 'rtl' ? delegate.getFirstKey?.(manager.focusedKey) : delegate.getLastKey?.(manager.focusedKey);
           }
@@ -214,7 +214,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       }
       case 'ArrowRight': {
         if (delegate.getKeyRightOf) {
-          let nextKey: Key | undefined | null = manager.focusedKey != null ? delegate.getKeyRightOf?.(manager.focusedKey) : null;
+          let nextKey: Key | undefined | null = manager.focusedKey != null ? delegate.getKeyRightOf?.(manager.focusedKey) : delegate.getFirstKey?.();
           if (nextKey == null && shouldFocusWrap) {
             nextKey = direction === 'rtl' ? delegate.getLastKey?.(manager.focusedKey) : delegate.getFirstKey?.(manager.focusedKey);
           }

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

@@ -1208,3 +1208,39 @@ export const AutocompleteUserCustomFiltering: AutocompleteStory = {
     }
   }
 };
+
+export function AutocompleteGrid() {
+  return (
+    <AutocompleteWrapper>
+      <div>
+        <TextField autoFocus data-testid="autocomplete-example">
+          <Label style={{display: 'block'}}>Test</Label>
+          <Input />
+          <Text style={{display: 'block'}} slot="description">Please select an option below.</Text>
+        </TextField>
+        <ListBox
+          className={styles.menu}
+          aria-label="test listbox"
+          layout="grid"
+          orientation="vertical"
+          style={{
+            width: 300,
+            height: 300,
+            display: 'grid',
+            gridTemplate: 'repeat(3, 1fr) / repeat(3, 1fr)',
+            gridAutoFlow: 'row'
+          }}>
+          <MyListBoxItem style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>1,1</MyListBoxItem>
+          <MyListBoxItem style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>1,2</MyListBoxItem>
+          <MyListBoxItem style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>1,3</MyListBoxItem>
+          <MyListBoxItem style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>2,1</MyListBoxItem>
+          <MyListBoxItem style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>2,2</MyListBoxItem>
+          <MyListBoxItem style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>2,3</MyListBoxItem>
+          <MyListBoxItem style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>3,1</MyListBoxItem>
+          <MyListBoxItem style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>3,2</MyListBoxItem>
+          <MyListBoxItem style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>3,3</MyListBoxItem>
+        </ListBox>
+      </div>
+    </AutocompleteWrapper>
+  );
+};