Stop dialog inside collection from closing due to typeahead (#4328)

* Stop dialog inside collection from closing due to typeahead

Author: snowystinger

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

@@ -53,7 +53,7 @@ export function useTypeSelect(options: AriaTypeSelectOptions): TypeSelectAria {
 
   let onKeyDown = (e: KeyboardEvent) => {
     let character = getStringForKey(e.key);
-    if (!character || e.ctrlKey || e.metaKey) {
+    if (!character || e.ctrlKey || e.metaKey || !e.currentTarget.contains(e.target as HTMLElement)) {
       return;
     }
 

packages/@react-spectrum/table/stories/Table.stories.tsx

@@ -1791,3 +1791,53 @@ export const ResizingControlledHideHeader: TableStory = {
   `}}
 };
 
+let typeAheadColumns = [
+  {name: 'First Name', id: 'firstname', isRowHeader: true},
+  {name: 'Last Name', id: 'lastname', isRowHeader: true},
+  {name: 'Birthday', id: 'birthday'},
+  {name: 'Edit', id: 'edit'}
+];
+let typeAheadRows = [
+  ...Array.from({length: 100}, (v, i) => ({id: i, firstname: 'Aubrey', lastname: 'Sheppard', birthday: 'May 7'})),
+  {id: 101, firstname: 'John', lastname: 'Doe', birthday: 'May 7'}
+];
+export const TypeaheadWithDialog: TableStory = {
+  render: (args) => (
+    <div style={{height: '90vh'}}>
+      <TableView aria-label="Table" selectionMode="none" height="100%" {...args}>
+        <TableHeader columns={typeAheadColumns}>
+          {(col) => (
+            <Column key={col.id} isRowHeader={col.isRowHeader}>{col.name}</Column>
+          )}
+        </TableHeader>
+        <TableBody items={typeAheadRows}>
+          {(item) => (
+            <Row key={item.id}>
+              {(key) =>
+                key === 'edit' ? (
+                  <Cell>
+                    <DialogTrigger>
+                      <ActionButton aria-label="Add Info">
+                        <Add />
+                      </ActionButton>
+                      <Dialog>
+                        <Heading>Add Info</Heading>
+                        <Divider />
+                        <Content>
+                          <TextField label="Enter a J" />
+                        </Content>
+                      </Dialog>
+                    </DialogTrigger>
+                  </Cell>
+                ) : (
+                  <Cell>{item[key]}</Cell>
+                )
+              }
+            </Row>
+          )}
+        </TableBody>
+      </TableView>
+    </div>
+  )
+};
+

packages/@react-spectrum/table/test/Table.test.js

@@ -36,7 +36,8 @@ import userEvent from '@testing-library/user-event';
 let {
   InlineDeleteButtons: DeletableRowsTable,
   EmptyStateStory: EmptyStateTable,
-  WithBreadcrumbNavigation: TableWithBreadcrumbs
+  WithBreadcrumbNavigation: TableWithBreadcrumbs,
+  TypeaheadWithDialog: TypeaheadWithDialog
 } = composeStories(stories);
 
 
@@ -1412,6 +1413,43 @@ describe('TableView', function () {
         moveFocus('S');
         expect(document.activeElement).toBe(getCell(tree, 'Sam'));
       });
+
+      describe('type ahead with dialog triggers', function () {
+        beforeEach(function () {
+          offsetHeight.mockRestore();
+          offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get')
+            .mockImplementationOnce(() => 20)
+            .mockImplementation(() => 100);
+        });
+        afterEach(function () {
+          offsetHeight.mockRestore();
+          offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 1000);
+        });
+        it('does not pick up typeahead from a dialog', function () {
+          offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get')
+            .mockImplementationOnce(() => 20)
+            .mockImplementation(() => 100);
+          let tree = render(<TypeaheadWithDialog />);
+          let trigger = tree.getAllByRole('button')[0];
+          triggerPress(trigger);
+          act(() => {
+            jest.runAllTimers();
+          });
+          let textfield = tree.getByLabelText('Enter a J');
+          act(() => {textfield.focus();});
+          fireEvent.keyDown(textfield, {key: 'J'});
+          fireEvent.keyUp(textfield, {key: 'J'});
+          act(() => {
+            jest.runAllTimers();
+          });
+          expect(document.activeElement).toBe(textfield);
+          fireEvent.keyDown(document.activeElement, {key: 'Escape'});
+          fireEvent.keyUp(document.activeElement, {key: 'Escape'});
+          act(() => {
+            jest.runAllTimers();
+          });
+        });
+      });
     });
 
     describe('focus marshalling', function () {