fix: Autocomplete event leak and erroneous item focus after backspacing (#7584)

* Prevent keydown events from leaking out of the autocomplete

* Fix edge case where item was getting autofocused when backspacing

Author: LFDanLu

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

@@ -223,7 +223,7 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
     }
   };
 
-  let onKeyUp = useEffectEvent((e) => {
+  let onKeyUpCapture = useEffectEvent((e) => {
     // Dispatch simulated key up events for things like triggering links in listbox
     // Make sure to stop the propagation of the input keyup event so that the simulated keyup/down pair
     // is detected by usePress instead of the original keyup originating from the input
@@ -243,11 +243,11 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
   });
 
   useEffect(() => {
-    document.addEventListener('keyup', onKeyUp, true);
+    document.addEventListener('keyup', onKeyUpCapture, true);
     return () => {
-      document.removeEventListener('keyup', onKeyUp, true);
+      document.removeEventListener('keyup', onKeyUpCapture, true);
     };
-  }, [inputRef, onKeyUp]);
+  }, [inputRef, onKeyUpCapture]);
 
   let {keyboardProps} = useKeyboard({onKeyDown});
 
@@ -284,7 +284,10 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
     collectionProps: mergeProps(collectionProps, {
       // TODO: shouldFocusOnHover? shouldFocusWrap? Should it be up to the wrapped collection?
       shouldUseVirtualFocus: true,
-      disallowTypeAhead: true
+      disallowTypeAhead: true,
+      // Prevent the emulated keyboard events that were dispatched on the wrapped collection from propagating outside of the autocomplete since techincally
+      // they've been handled by the input already
+      onKeyDown: (e) => e.stopPropagation()
     }),
     collectionRef: mergedCollectionRef,
     filterFn: filter != null ? filterFn : undefined

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

@@ -420,6 +420,12 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
           bubbles: true
         })
       );
+
+      // If there wasn't a focusable key but the collection had items, then that means we aren't in an intermediate load state and all keys are disabled.
+      // Reset shouldVirtualFocusFirst so that we don't erronously autofocus an item when the collection is filtered again.
+      if (manager.collection.size > 0) {
+        shouldVirtualFocusFirst.current = false;
+      }
     } else {
       manager.setFocusedKey(keyToFocus);
       // Only set shouldVirtualFocusFirst to false if we've successfully set the first key as the focused key

packages/react-aria-components/test/AriaAutocomplete.test-util.tsx

@@ -395,6 +395,31 @@ export const AriaAutocompleteTests = ({renderers, setup, prefix, ariaPattern = '
           expect(actionListener).toHaveBeenCalledTimes(0);
         });
       });
+
+      it('should not autofocus the first item if backspacing from a list state where there are only disabled items', async function () {
+        let {getByRole} =  (renderers.disabledItems!)();
+        let input = getByRole('searchbox');
+        let menu = getByRole(collectionNodeRole);
+        let options = within(menu).getAllByRole(collectionItemRole);
+        expect(options[1]).toHaveAttribute('aria-disabled', 'true');
+
+        await user.tab();
+        expect(document.activeElement).toBe(input);
+        await user.keyboard('r');
+        act(() => jest.runAllTimers());
+        options = within(menu).getAllByRole(collectionItemRole);
+        expect(options).toHaveLength(1);
+        expect(input).not.toHaveAttribute('aria-activedescendant');
+        expect(options[0]).toHaveAttribute('aria-disabled', 'true');
+
+        await user.keyboard('{Backspace}');
+        act(() => jest.runAllTimers());
+        options = within(menu).getAllByRole(collectionItemRole);
+        expect(input).not.toHaveAttribute('aria-activedescendant');
+        await user.keyboard('{ArrowDown}');
+        act(() => jest.runAllTimers());
+        expect(input).toHaveAttribute('aria-activedescendant', options[0].id);
+      });
     }
 
     let filterTests = (renderer) => {

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

@@ -12,10 +12,11 @@
 
 import {AriaAutocompleteTests} from './AriaAutocomplete.test-util';
 import {Header, Input, Label, ListBox, ListBoxItem, ListBoxSection, Menu, MenuItem, MenuSection, SearchField, Separator, Text, UNSTABLE_Autocomplete} from '..';
+import {pointerMap, render} from '@react-spectrum/test-utils-internal';
 import React, {ReactNode} from 'react';
-import {render} from '@react-spectrum/test-utils-internal';
 import {useAsyncList} from 'react-stately';
 import {useFilter} from '@react-aria/i18n';
+import userEvent from '@testing-library/user-event';
 
 interface AutocompleteItem {
   id: string,
@@ -174,6 +175,32 @@ let AsyncFiltering = ({autocompleteProps = {}, inputProps = {}}: {autocompletePr
   );
 };
 
+describe('Autocomplete', () => {
+  let user;
+  beforeAll(() => {
+    user = userEvent.setup({delay: null, pointerMap});
+  });
+
+  it('should prevent key presses from leaking out of the Autocomplete', async () => {
+    let onKeyDown = jest.fn();
+    let {getByRole} = render(
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      <div onKeyDown={onKeyDown}>
+        <AutocompleteWrapper>
+          <StaticMenu />
+        </AutocompleteWrapper>
+      </div>
+    );
+
+    let input = getByRole('searchbox');
+    await user.tab();
+    expect(document.activeElement).toBe(input);
+    await user.keyboard('{ArrowDown}');
+    expect(onKeyDown).not.toHaveBeenCalled();
+    onKeyDown.mockReset();
+  });
+});
+
 AriaAutocompleteTests({
   prefix: 'rac-static-menu',
   renderers: {