fix: Autocomplete 'tab' key forwarding

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

@@ -171,7 +171,13 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
         break;
       case ' ':
         // Space shouldn't trigger onAction so early return.
-
+        return;
+      case 'Tab':
+        // Don't propogate Tab down to the collection, otherwise we will try to focus the collection via useSelectableCollection's Tab handler (aka shift tab logic)
+        // We want FocusScope to handle Tab if one exists (aka sub dialog), so special casepropogate
+        if ('continuePropagation' in e) {
+          e.continuePropagation();
+        }
         return;
       case 'Home':
       case 'End':

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

@@ -11,7 +11,7 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {UNSTABLE_Autocomplete as Autocomplete, Button, Collection, Dialog, DialogTrigger, Header, Input, Keyboard, Label, ListBox, ListBoxSection, UNSTABLE_ListLayout as ListLayout, Menu, MenuSection, MenuTrigger, Popover, SearchField, Separator, Text, TextField, UNSTABLE_Virtualizer as Virtualizer} from 'react-aria-components';
+import {UNSTABLE_Autocomplete as Autocomplete, Button, Collection, Dialog, DialogTrigger, Header, Input, Keyboard, Label, ListBox, ListBoxSection, UNSTABLE_ListLayout as ListLayout, Menu, MenuItem, MenuSection, MenuTrigger, Popover, SearchField, Separator, Text, TextField, UNSTABLE_Virtualizer as Virtualizer} from 'react-aria-components';
 import {MyListBoxItem, MyMenuItem} from './utils';
 import React, {useMemo} from 'react';
 import styles from '../example/index.css';
@@ -517,3 +517,84 @@ export const AutocompleteInPopoverDialogTrigger = {
     }
   }
 };
+
+const MyMenu = () => {
+  let {contains} = useFilter({sensitivity: 'base'});
+
+  return (
+    <DialogTrigger>
+      <Button aria-label="Menu">☰</Button>
+      <Popover>
+        <Dialog>
+          <Button>First</Button>
+          <Button>Second</Button>
+          <Autocomplete filter={contains}>
+            <TextField autoFocus>
+              <Input />
+            </TextField>
+            <Menu>
+              <MenuItem onAction={() => console.log('open')}>Open</MenuItem>
+              <MenuItem onAction={() => console.log('rename')}>
+                Rename…
+              </MenuItem>
+              <MenuItem onAction={() => console.log('duplicate')}>
+                Duplicate
+              </MenuItem>
+              <MenuItem onAction={() => console.log('share')}>Share…</MenuItem>
+              <MenuItem onAction={() => console.log('delete')}>
+                Delete…
+              </MenuItem>
+            </Menu>
+          </Autocomplete>
+        </Dialog>
+      </Popover>
+    </DialogTrigger>
+  );
+};
+
+const MyMenu2 = () => {
+  let {contains} = useFilter({sensitivity: 'base'});
+
+  return (
+    <DialogTrigger>
+      <Button aria-label="Menu">☰</Button>
+      <Popover>
+        <Dialog>
+          <Autocomplete filter={contains}>
+            <TextField autoFocus>
+              <Input />
+            </TextField>
+            <Menu>
+              <MenuItem onAction={() => console.log('open')}>Open</MenuItem>
+              <MenuItem onAction={() => console.log('rename')}>
+                Rename…
+              </MenuItem>
+              <MenuItem onAction={() => console.log('duplicate')}>
+                Duplicate
+              </MenuItem>
+              <MenuItem onAction={() => console.log('share')}>Share…</MenuItem>
+              <MenuItem onAction={() => console.log('delete')}>
+                Delete…
+              </MenuItem>
+            </Menu>
+          </Autocomplete>
+          <Button>First</Button>
+          <Button>Second</Button>
+        </Dialog>
+      </Popover>
+    </DialogTrigger>
+  );
+};
+
+export function AutocompleteWithExtraButtons() {
+  return (
+    <div>
+      <input />
+      <div style={{display: 'flex', gap: '200px'}}>
+        <MyMenu />
+        <MyMenu2 />
+      </div>
+      <input />
+    </div>
+  );
+}

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

@@ -11,7 +11,7 @@
  */
 
 import {AriaAutocompleteTests} from './AriaAutocomplete.test-util';
-import {Button, Header, Input, Label, ListBox, ListBoxItem, ListBoxSection, Menu, MenuItem, MenuSection, SearchField, Separator, Text, UNSTABLE_Autocomplete} from '..';
+import {Button, Dialog, DialogTrigger, Header, Input, Label, ListBox, ListBoxItem, ListBoxSection, Menu, MenuItem, MenuSection, Popover, SearchField, Separator, Text, TextField, UNSTABLE_Autocomplete} from '..';
 import {pointerMap, render, within} from '@react-spectrum/test-utils-internal';
 import React, {ReactNode} from 'react';
 import {useAsyncList} from 'react-stately';
@@ -244,6 +244,136 @@ describe('Autocomplete', () => {
     expect(options[1]).toHaveAttribute('data-focused');
     expect(options[1]).not.toHaveAttribute('data-focus-visible');
   });
+
+  it('should be able to tab inside a focus scope that contains', async () => {
+    const MyMenu = () => {
+      let {contains} = useFilter({sensitivity: 'base'});
+
+      return (
+        <DialogTrigger>
+          <Button aria-label="Menu">☰</Button>
+          <Popover>
+            <Dialog>
+              <Button>First</Button>
+              <Button>Second</Button>
+              <UNSTABLE_Autocomplete filter={contains}>
+                <TextField autoFocus aria-label="Search">
+                  <Input />
+                </TextField>
+                <Menu>
+                  <MenuItem>Open</MenuItem>
+                  <MenuItem>
+                    Rename…
+                  </MenuItem>
+                  <MenuItem>
+                    Duplicate
+                  </MenuItem>
+                </Menu>
+              </UNSTABLE_Autocomplete>
+            </Dialog>
+          </Popover>
+        </DialogTrigger>
+      );
+    };
+
+    function App() {
+      return (
+        <div>
+          <input />
+          <div>
+            <MyMenu />
+          </div>
+          <input />
+        </div>
+      );
+    }
+
+    let {getByRole} = render(<App />);
+    let trigger = getByRole('button', {name: 'Menu'});
+    await user.click(trigger);
+    let firstButton = getByRole('button', {name: 'First'});
+    let secondButton = getByRole('button', {name: 'Second'});
+    let input = getByRole('textbox');
+
+    expect(document.activeElement).toBe(input);
+
+    await user.tab();
+
+    expect(document.activeElement).toBe(firstButton);
+
+    await user.tab({shift: true});
+
+    expect(document.activeElement).toBe(input);
+
+    await user.tab({shift: true});
+
+    expect(document.activeElement).toBe(secondButton);
+  });
+
+  it('should be able to tab inside a focus scope that contains with buttons after the autocomplete', async () => {
+    const MyMenu = () => {
+      let {contains} = useFilter({sensitivity: 'base'});
+
+      return (
+        <DialogTrigger>
+          <Button aria-label="Menu">☰</Button>
+          <Popover>
+            <Dialog>
+              <UNSTABLE_Autocomplete filter={contains}>
+                <TextField autoFocus aria-label="Search">
+                  <Input />
+                </TextField>
+                <Menu>
+                  <MenuItem>Open</MenuItem>
+                  <MenuItem>
+                    Rename…
+                  </MenuItem>
+                  <MenuItem>
+                    Duplicate
+                  </MenuItem>
+                </Menu>
+              </UNSTABLE_Autocomplete>
+              <Button>First</Button>
+              <Button>Second</Button>
+            </Dialog>
+          </Popover>
+        </DialogTrigger>
+      );
+    };
+
+    function App() {
+      return (
+        <div>
+          <input />
+          <div>
+            <MyMenu />
+          </div>
+          <input />
+        </div>
+      );
+    }
+
+    let {getByRole} = render(<App />);
+    let trigger = getByRole('button', {name: 'Menu'});
+    await user.click(trigger);
+    let firstButton = getByRole('button', {name: 'First'});
+    let secondButton = getByRole('button', {name: 'Second'});
+    let input = getByRole('textbox');
+
+    expect(document.activeElement).toBe(input);
+
+    await user.tab();
+
+    expect(document.activeElement).toBe(firstButton);
+
+    await user.tab({shift: true});
+
+    expect(document.activeElement).toBe(input);
+
+    await user.tab({shift: true});
+
+    expect(document.activeElement).toBe(secondButton);
+  });
 });
 
 AriaAutocompleteTests({