Fix focus behavior after dropping ListView item (#3369)

* Fix focus after dropping item

* add tests

* add drag utility

* fix touch event in drag function

* fix test

* update mouse drag tests

* rename drag utility

* test fixes

* more test fixes

* fix some tests

* update dragAndDrop utility

* fix more tests

* fix more tests

* revert dragAndDrop utility add

* lint

* lint

* lint

* update todos

* fix tests

* fix 16 and 17 tests

Co-authored-by: Rob Snow <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: 3 people

packages/@react-aria/dnd/src/DragManager.ts

@@ -13,6 +13,7 @@
 import {announce} from '@react-aria/live-announcer';
 import {ariaHideOutside} from '@react-aria/overlays';
 import {DragEndEvent, DragItem, DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropItem, DropOperation, DropTarget as DroppableCollectionTarget, FocusableElement} from '@react-types/shared';
+import {flushSync} from 'react-dom';
 import {getDragModality, getTypes} from './utils';
 import {getInteractionModality} from '@react-aria/interactions';
 import type {LocalizedStringFormatter} from '@internationalized/string';
@@ -494,7 +495,16 @@ class DragSession {
 
     // Blur and re-focus the drop target so that the focus ring appears.
     if (this.currentDropTarget) {
-      this.currentDropTarget.element.blur();
+      // Since we cancel all focus events in drag sessions, refire blur to make sure state gets updated so drag target doesn't think it's still focused
+      // i.e. When you from one list to another during a drag session, we need the blur to fire on the first list after the drag.
+      if (!this.dragTarget.element.contains(this.currentDropTarget.element)) {
+        this.dragTarget.element.dispatchEvent(new FocusEvent('blur'));
+        this.dragTarget.element.dispatchEvent(new FocusEvent('focusout', {bubbles: true}));
+      }
+      // Re-focus the focusedKey upon reorder. This requires a React rerender between blurring and focusing.
+      flushSync(() => {
+        this.currentDropTarget.element.blur();
+      });
       this.currentDropTarget.element.focus();
     }
 

packages/@react-spectrum/list/stories/ListView.stories.tsx

@@ -852,7 +852,10 @@ export function DragIntoItemExample(props) {
 }
 
 export function DragBetweenListsExample(props) {
-  let onDropAction = action('onDrop');
+  let {onDragStart, onDragEnd, onDrop} = props;
+  onDrop = chain(action('onDrop'), onDrop);
+  onDragStart = chain(action('dragStart'), onDragStart);
+  onDragEnd = chain(action('dragEnd'), onDragEnd);
 
   let list1 = useListData({
     initialItems: props.items1 || itemList1
@@ -898,8 +901,8 @@ export function DragBetweenListsExample(props) {
       getAllowedDropOperationsAction();
       return ['move', 'cancel'];
     },
-    onDragStart: action('dragStart'),
-    onDragEnd: action('dragEnd')
+    onDragStart,
+    onDragEnd
   });
 
   // Use a random drag type so the items can only be reordered within the two lists and not dragged elsewhere.
@@ -923,7 +926,7 @@ export function DragBetweenListsExample(props) {
             }
           }
         }
-        onDropAction(e);
+        onDrop(e);
         onMove(keys, e.target);
       }
     },