fix: User Event tab retargeting bug (#8700)

Co-authored-by: Yihui Liao <[email protected]>

Author: snowystinger

.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch

@@ -11,6 +11,19 @@ index 39a24b8f2ccdc52739d130480ab18975073616cb..0c3f5199401c15b90230c25a02de364e
              }
              UI.clearInitialValue(el);
          }
+diff --git a/dist/cjs/event/behavior/keydown.js b/dist/cjs/event/behavior/keydown.js
+index 55027cb256f66b808d17280dc01bc55a796a1032..993d5de5a838a711d7ae009344354772a42ed0c1 100644
+--- a/dist/cjs/event/behavior/keydown.js
++++ b/dist/cjs/event/behavior/keydown.js
+@@ -110,7 +110,7 @@ const keydownBehavior = {
+     },
+     Tab: (event, target, instance)=>{
+         return ()=>{
+-            const dest = getTabDestination.getTabDestination(target, instance.system.keyboard.modifiers.Shift);
++            const dest = getTabDestination.getTabDestination(document.activeElement, instance.system.keyboard.modifiers.Shift);
+             focus.focusElement(dest);
+             if (selection.hasOwnSelection(dest)) {
+                 UI.setUISelection(dest, {
 diff --git a/dist/cjs/utils/focus/getActiveElement.js b/dist/cjs/utils/focus/getActiveElement.js
 index d25f3a8ef67e856e43614559f73012899c0b53d7..4ed9ee45565ed438ee9284d8d3043c0bd50463eb 100644
 --- a/dist/cjs/utils/focus/getActiveElement.js

packages/@react-spectrum/list/test/ListViewDnd.test.js

@@ -2425,7 +2425,6 @@ describe('ListView', function () {
 
           tree.rerender(<DragBetweenListsComplex secondListDnDOptions={{...mockUtilityOptions, onRootDrop: null, onInsert: null}} />);
           await user.tab({shift: true});
-          await user.tab({shift: true});
           await beginDrag(tree);
           await user.tab();
           // Should automatically jump to the folder target since we didn't provide onRootDrop and onInsert

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

@@ -2145,7 +2145,6 @@ describe('TableView', function () {
           });
           act(() => jest.runAllTimers());
           await user.tab({shift: true});
-          await user.tab({shift: true});
           await user.keyboard('{ArrowLeft}');
 
           // Drop on folder in same table
@@ -2301,10 +2300,6 @@ describe('TableView', function () {
           await user.keyboard('{Escape}');
 
           tree.rerender(<DragBetweenTablesComplex secondTableDnDOptions={{...mockUtilityOptions, onRootDrop: null, onInsert: null}} />);
-          await user.tab({shift: true});
-          await user.tab({shift: true});
-          await user.keyboard('{ArrowLeft}');
-          await user.keyboard('{ArrowRight}');
 
           let grids = tree.getAllByRole('grid');
           let rowgroup = within(grids[0]).getAllByRole('rowgroup')[1];

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

@@ -782,10 +782,7 @@ describe('GridList', () => {
     expect(document.activeElement).toBe(items[1]);
 
     await user.tab();
-    expect(document.activeElement).toBe(buttonRef.current);
-
-    await user.tab();
-    expect(document.activeElement).toBe(document.body);
+    expect(document.body).toHaveFocus();
   });
 
   it('should support rendering a TagGroup with tabbing navigation inside a GridListItem', async () => {

yarn.lock

@@ -10219,10 +10219,10 @@ __metadata:
 
 "@testing-library/user-event@patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch":
   version: 14.6.1
-  resolution: "@testing-library/user-event@patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch::version=14.6.1&hash=13cf21"
+  resolution: "@testing-library/user-event@patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch::version=14.6.1&hash=3511b9"
   peerDependencies:
     "@testing-library/dom": ">=7.21.4"
-  checksum: 10c0/ede32fec9345bb5e5c19a5abcb647d8c4704239f3f5417afe2914c1397067dae7ce547e46adfd4027c913f5735c0651ec530c73bdc5c7ea955efa860cc6a9dd9
+  checksum: 10c0/5a3e378cfdcad1ae09b73141ba9ea5adb0e7ed0d9f6bf1c4ba3631c91554414c4f2ab255c23f08425d2d398daa11d745ead8ef7ba0d1de76e19252db0b5dbba3
   languageName: node
   linkType: hard