fix so that Tab from combobox and toolbar propagate upwards so that you tab out of gridlist

Author: LFDanLu

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

@@ -1008,6 +1008,31 @@ export const GridListWithTextfield: GridListStory = args => {
           </TextField>{' '}
           <Button>Go</Button>
         </MyGridListItem>
+        <MyGridListItem textValue="Combobox">
+          ComboBox
+          <ComboBox aria-label="combobox" allowsEmptyCollection>
+            <div style={{display: 'flex'}}>
+              <Input />
+              <Button>
+                <span aria-hidden="true" style={{padding: '0 2px'}}>
+                  ▼
+                </span>
+              </Button>
+            </div>
+            <Popover>
+              <ListBox
+                renderEmptyState={comboboxEmptyState}
+                data-testid="combo-box-list-box"
+                className={styles.menu}
+                style={{width: 'var(--trigger-width)'}}>
+                <MyListBoxItem>Foo</MyListBoxItem>
+                <MyListBoxItem>Bar</MyListBoxItem>
+                <MyListBoxItem>Baz</MyListBoxItem>
+                <MyListBoxItem href="http://google.com">Google</MyListBoxItem>
+              </ListBox>
+            </Popover>
+          </ComboBox>
+        </MyGridListItem>
         <MyGridListItem textValue="Toolbar">
           Toolbar
           <Toolbar aria-label="Text formatting" style={{gap: 4}}>
@@ -1077,31 +1102,6 @@ export const GridListWithTextfield: GridListStory = args => {
             </Checkbox>
           </CheckboxGroup>
         </MyGridListItem>
-        <MyGridListItem textValue="Combobox">
-          ComboBox
-          <ComboBox aria-label="combobox" allowsEmptyCollection>
-            <div style={{display: 'flex'}}>
-              <Input />
-              <Button>
-                <span aria-hidden="true" style={{padding: '0 2px'}}>
-                  ▼
-                </span>
-              </Button>
-            </div>
-            <Popover>
-              <ListBox
-                renderEmptyState={comboboxEmptyState}
-                data-testid="combo-box-list-box"
-                className={styles.menu}
-                style={{width: 'var(--trigger-width)'}}>
-                <MyListBoxItem>Foo</MyListBoxItem>
-                <MyListBoxItem>Bar</MyListBoxItem>
-                <MyListBoxItem>Baz</MyListBoxItem>
-                <MyListBoxItem href="http://google.com">Google</MyListBoxItem>
-              </ListBox>
-            </Popover>
-          </ComboBox>
-        </MyGridListItem>
       </GridList>
       <input aria-label="input after gridlist" />
     </div>

packages/react-aria-components/test/GridList.test.js

@@ -22,6 +22,7 @@ import {
 import {Checkbox as AriaCheckbox, CheckboxButton, CheckboxField} from '../src/Checkbox';
 import {Button} from '../src/Button';
 import {Collection} from 'react-aria/Collection';
+import {ComboBox} from '../src/ComboBox';
 import {Dialog, DialogTrigger} from '../src/Dialog';
 import {DropIndicator, useDragAndDrop} from '../src/useDragAndDrop';
 import {getFocusableTreeWalker} from 'react-aria/private/focus/FocusScope';
@@ -33,13 +34,17 @@ import {
   GridListSection
 } from '../src/GridList';
 import {GridListLoadMoreItem} from '../src/GridList';
+import {Input} from '../src/Input';
 import {installPointerEvent, User} from '@react-aria/test-utils';
 import {Label} from '../src/Label';
+import {ListBox, ListBoxItem} from '../src/ListBox';
 import {ListLayout} from 'react-stately/useVirtualizerState';
 import {Modal} from '../src/Modal';
+import {Popover} from '../src/Popover';
 import React from 'react';
 import {RouterProvider} from 'react-aria/private/utils/openLink';
 import {Tag, TagGroup, TagList} from '../src/TagGroup';
+import {Toolbar} from '../src/Toolbar';
 import userEvent from '@testing-library/user-event';
 import {Virtualizer} from '../src/Virtualizer';
 
@@ -2002,5 +2007,79 @@ describe('GridList', () => {
         expect(new Set(onSelectionChange.mock.calls[0][0])).toEqual(new Set(['item1']));
       }
     );
+
+    it.each([
+      ['keyboardNavigationBehavior="tab"', {keyboardNavigationBehavior: 'tab'}],
+      ['layout="grid"', {layout: 'grid'}]
+    ])(
+      'should exit the grid when tabbing from a combobox or toolbar, not focus the next row  (%s)',
+      async (_, listProps) => {
+        let {getByRole} = render(
+          <div>
+            <input aria-label="before" />
+            <GridList aria-label="Test" {...listProps}>
+              <GridListItem id="1" textValue="combobox">
+                <ComboBox aria-label="combobox">
+                  <Input />
+                  <Button>▼</Button>
+                  <Popover>
+                    <ListBox>
+                      <ListBoxItem>Foo</ListBoxItem>
+                      <ListBoxItem>Bar</ListBoxItem>
+                    </ListBox>
+                  </Popover>
+                </ComboBox>
+              </GridListItem>
+              <GridListItem id="2" textValue="formatting">
+                <Toolbar aria-label="formatting">
+                  <Button>Bold</Button>
+                  <Button>Italic</Button>
+                </Toolbar>
+              </GridListItem>
+              <GridListItem id="3" textValue="plain input row">
+                <input aria-label="row 2 input" />
+              </GridListItem>
+            </GridList>
+            <input aria-label="after" />
+          </div>
+        );
+
+        let combobox = getByRole('combobox');
+        let afterInput = getByRole('textbox', {name: 'after'});
+        let boldButton = getByRole('button', {name: 'Bold'});
+        let row2Input = getByRole('textbox', {name: 'row 2 input'});
+
+        let gridListTester = testUtilUser.createTester('GridList', {root: getByRole('grid')});
+        let rows = gridListTester.getRows();
+
+        await user.tab();
+        await user.tab();
+        await user.tab();
+        expect(document.activeElement).toBe(combobox);
+
+        await user.tab();
+        expect(document.activeElement).toBe(afterInput);
+
+        // note that shift tabbing move focus back to gridlist item not the combobox itself,
+        // will need to look into this later
+        await user.tab({shift: true});
+        expect(document.activeElement).toBe(rows[0]);
+        await user.keyboard(listProps.layout === 'grid' ? '{ArrowRight}' : '{ArrowDown}');
+        expect(document.activeElement).toBe(rows[1]);
+        await user.tab();
+        expect(document.activeElement).toBe(boldButton);
+        await user.tab();
+        expect(document.activeElement).toBe(afterInput);
+
+        await user.tab({shift: true});
+        expect(document.activeElement).toBe(rows[1]);
+        await user.keyboard(listProps.layout === 'grid' ? '{ArrowRight}' : '{ArrowDown}');
+        expect(document.activeElement).toBe(rows[2]);
+        await user.tab();
+        expect(document.activeElement).toBe(row2Input);
+        await user.tab();
+        expect(document.activeElement).toBe(afterInput);
+      }
+    );
   });
 });

packages/react-aria/src/combobox/useComboBox.ts

@@ -223,7 +223,7 @@ export function useComboBox<T, M extends SelectionMode = 'single'>(
         if (state.isOpen) {
           state.commit();
         }
-        return {shouldPreventDefault: false};
+        return {shouldPreventDefault: false, shouldContinuePropagation: true};
       },
       Escape: () => {
         let shouldContinuePropagation = false;

packages/react-aria/src/interactions/createEventHandler.ts

@@ -45,6 +45,11 @@ export function createEventHandler<T extends SyntheticEvent>(
       },
       continuePropagation() {
         shouldStopPropagation = false;
+        // nested createEventHandler might have set continue propagation so we should continue
+        // propagation on wrappers
+        if (typeof (e as any).continuePropagation === 'function') {
+          (e as any).continuePropagation();
+        }
       },
       isPropagationStopped() {
         return shouldStopPropagation;

packages/react-aria/src/toolbar/useToolbar.ts

@@ -89,7 +89,6 @@ export function useToolbar(
       // out of the entire toolbar. To do this, move focus
       // to the first or last focusable child, and let the
       // browser handle the Tab key as usual from there.
-      e.stopPropagation();
       lastFocused.current = getActiveElement() as HTMLElement;
       if (e.shiftKey) {
         focusManager.focusFirst();