Update dnd examples to focus inserted items on drop (#1721)

* Update dnd examples to focus inserted items on drop

* Automatically focus and select items on drop

* Review changes

Author: devongovett

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

@@ -10,12 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
+import {Collection, DropEvent, DropOperation, DroppableCollectionProps, DropPosition, DropTarget, KeyboardDelegate, Node} from '@react-types/shared';
 import * as DragManager from './DragManager';
-import {DropOperation, DroppableCollectionProps, DropPosition, DropTarget, KeyboardDelegate} from '@react-types/shared';
 import {DroppableCollectionState} from '@react-stately/dnd';
 import {getTypes} from './utils';
-import {HTMLAttributes, RefObject, useEffect, useRef} from 'react';
+import {HTMLAttributes, Key, RefObject, useCallback, useEffect, useLayoutEffect, useRef} from 'react';
 import {mergeProps} from '@react-aria/utils';
+import {setInteractionModality} from '@react-aria/interactions';
 import {useAutoScroll} from './useAutoScroll';
 import {useDrop} from './useDrop';
 import {useDroppableCollectionId} from './utils';
@@ -29,6 +30,13 @@ interface DroppableCollectionResult {
   collectionProps: HTMLAttributes<HTMLElement>
 }
 
+interface DroppingState {
+  collection: Collection<Node<unknown>>,
+  focusedKey: Key,
+  selectedKeys: Set<Key>,
+  timeout: NodeJS.Timeout
+}
+
 const DROP_POSITIONS: DropPosition[] = ['before', 'on', 'after'];
 
 export function useDroppableCollection(props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DroppableCollectionResult {
@@ -96,15 +104,100 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
     },
     onDrop(e) {
       if (state.target && typeof props.onDrop === 'function') {
-        props.onDrop({
-          type: 'drop',
-          x: e.x, // todo
-          y: e.y,
-          target: state.target,
-          items: e.items,
-          dropOperation: e.dropOperation
-        });
+        onDrop(e, state.target);
+      }
+    }
+  });
+
+  let droppingState = useRef<DroppingState>(null);
+  let onDrop = useCallback((e: DropEvent, target: DropTarget) => {
+    let {state} = localState;
+
+    // Focus the collection.
+    state.selectionManager.setFocused(true);
+
+    // Save some state of the collection/selection before the drop occurs so we can compare later.
+    let focusedKey = state.selectionManager.focusedKey;
+    droppingState.current = {
+      timeout: null,
+      focusedKey,
+      collection: state.collection,
+      selectedKeys: state.selectionManager.selectedKeys
+    };
+
+    localState.props.onDrop({
+      type: 'drop',
+      x: e.x, // todo
+      y: e.y,
+      target,
+      items: e.items,
+      dropOperation: e.dropOperation
+    });
+
+    // Wait for a short time period after the onDrop is called to allow the data to be read asynchronously
+    // and for React to re-render. If an insert occurs during this time, it will be selected/focused below.
+    // If items are not "immediately" inserted by the onDrop handler, the application will need to handle
+    // selecting and focusing those items themselves.
+    droppingState.current.timeout = setTimeout(() => {
+      // If focus didn't move already (e.g. due to an insert), and the user dropped on an item,
+      // focus that item and show the focus ring to give the user feedback that the drop occurred.
+      // Also show the focus ring if the focused key is not selected, e.g. in case of a reorder.
+      let {state} = localState;
+      if (state.selectionManager.focusedKey === focusedKey) {
+        if (target.type === 'item' && target.dropPosition === 'on' && state.collection.getItem(target.key) != null) {
+          state.selectionManager.setFocusedKey(target.key);
+          state.selectionManager.setFocused(true);
+          setInteractionModality('keyboard');
+        } else if (!state.selectionManager.isSelected(focusedKey)) {
+          setInteractionModality('keyboard');
+        }
       }
+
+      droppingState.current = null;
+    }, 50);
+  }, [localState]);
+
+  // eslint-disable-next-line arrow-body-style
+  useEffect(() => {
+    return () => {
+      if (droppingState.current) {
+        clearTimeout(droppingState.current.timeout);
+      }
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    // If an insert occurs during a drop, we want to immediately select these items to give
+    // feedback to the user that a drop occurred. Only do this if the selection didn't change
+    // since the drop started so we don't override if the user or application did something.
+    if (
+      droppingState.current &&
+      state.selectionManager.isFocused &&
+      state.collection.size > droppingState.current.collection.size &&
+      state.selectionManager.isSelectionEqual(droppingState.current.selectedKeys)
+    ) {
+      let newKeys = new Set<Key>();
+      for (let key of state.collection.getKeys()) {
+        if (!droppingState.current.collection.getItem(key)) {
+          newKeys.add(key);
+        }
+      }
+
+      state.selectionManager.setSelectedKeys(newKeys);
+
+      // If the focused item didn't change since the drop occurred, also focus the first
+      // inserted item. If selection is disabled, then also show the focus ring so there
+      // is some indication that items were added.
+      if (state.selectionManager.focusedKey === droppingState.current.focusedKey) {
+        let first = newKeys.keys().next().value;
+        state.selectionManager.setFocusedKey(first);
+
+        if (state.selectionManager.selectionMode === 'none') {
+          setInteractionModality('keyboard');
+        }
+      }
+
+      droppingState.current = null;
     }
   });
 
@@ -315,14 +408,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       },
       onDrop(e, target) {
         if (localState.state.target && typeof localState.props.onDrop === 'function') {
-          localState.props.onDrop({
-            type: 'drop',
-            x: e.x, // todo
-            y: e.y,
-            target: target || localState.state.target,
-            items: e.items,
-            dropOperation: e.dropOperation
-          });
+          onDrop(e, target || localState.state.target);
         }
       },
       onKeyDown(e, drag) {
@@ -440,7 +526,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         }
       }
     });
-  }, [localState, ref]);
+  }, [localState, ref, onDrop]);
 
   let id = useDroppableCollectionId(state);
   return {

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

@@ -154,7 +154,7 @@ export class DragTypes implements IDragTypes {
 
     // In Safari, when dragging files, the dataTransfer.items list is empty, but dataTransfer.types contains "Files".
     // Unfortunately, this doesn't tell us what types of files the user is dragging, so we need to assume that any
-    // type the user checks for is included.
+    // type the user checks for is included. See https://bugs.webkit.org/show_bug.cgi?id=223517.
     this.includesUnknownTypes = !hasFiles && dataTransfer.types.includes('Files');
   }
 
@@ -208,10 +208,11 @@ export function readFromDataTransfer(dataTransfer: DataTransfer) {
         if (typeof item.webkitGetAsEntry === 'function') {
           let entry: FileSystemEntry = item.webkitGetAsEntry();
           if (!entry) {
-            // For some reason, Chrome and Firefox include an item with type image/png when copy
-            // and pasting any file or directory (no matter the type), but return `null` for both
+            // For some reason, Firefox includes an item with type image/png when copy
+            // and pasting any file or directory (no matter the type), but returns `null` for both
             // item.getAsFile() and item.webkitGetAsEntry(). Safari works as expected. Ignore this
-            // item if this happens.
+            // item if this happens. See https://bugzilla.mozilla.org/show_bug.cgi?id=1699743.
+            // This was recently fixed in Chrome Canary: https://bugs.chromium.org/p/chromium/issues/detail?id=1175483.
             continue;
           }
 

packages/@react-aria/dnd/stories/DroppableGrid.tsx

@@ -44,6 +44,8 @@ export function DroppableGridExample(props) {
     ]
   });
 
+  let ref = React.useRef(null);
+
   let onDrop = async (e: DroppableCollectionDropEvent) => {
     if (props.onDrop) {
       props.onDrop(e);
@@ -99,7 +101,7 @@ export function DroppableGridExample(props) {
   };
 
   return (
-    <DroppableGrid {...props} items={list.items} onDrop={onDrop}>
+    <DroppableGrid {...props} items={list.items} onDrop={onDrop} ref={ref}>
       {item => (
         <Item textValue={item.text}>
           {item.type === 'folder' && <Folder size="S" />}
@@ -110,12 +112,15 @@ export function DroppableGridExample(props) {
   );
 }
 
-function DroppableGrid(props) {
-  let ref = React.useRef<HTMLDivElement>(null);
+const DroppableGrid = React.forwardRef(function (props: any, ref) {
+  let domRef = React.useRef<HTMLDivElement>(null);
   let state = useListState(props);
-  let keyboardDelegate = new ListKeyboardDelegate(state.collection, new Set(), ref);
+  let keyboardDelegate = new ListKeyboardDelegate(state.collection, new Set(), domRef);
   let gridState = useGridState({
     selectionMode: 'multiple',
+    focusMode: 'cell',
+    selectedKeys: props.selectedKeys,
+    onSelectionChange: props.onSelectionChange,
     collection: new GridCollection({
       columnCount: 1,
       items: [...state.collection].map(item => ({
@@ -135,6 +140,13 @@ function DroppableGrid(props) {
     })
   });
 
+  React.useImperativeHandle(ref, () => ({
+    focusItem(key) {
+      gridState.selectionManager.setFocusedKey(`cell-${key}`);
+      gridState.selectionManager.setFocused(true);
+    }
+  }));
+
   let defaultGetDropOperation = (target, items, allowedOperations) => {
     if (target.type === 'root') {
       return 'move';
@@ -165,14 +177,14 @@ function DroppableGrid(props) {
     onDropActivate: props.onDropActivate,
     onDrop: props.onDrop,
     getDropTargetFromPoint(x, y) {
-      let rect = ref.current.getBoundingClientRect();
+      let rect = domRef.current.getBoundingClientRect();
       x += rect.x;
       y += rect.y;
       let closest = null;
       let closestDistance = Infinity;
       let closestDir = null;
 
-      for (let child of ref.current.children) {
+      for (let child of domRef.current.children) {
         if (!(child as HTMLElement).dataset.key) {
           continue;
         }
@@ -210,11 +222,11 @@ function DroppableGrid(props) {
         };
       }
     }
-  }, dropState, ref);
+  }, dropState, domRef);
 
   let {gridProps} = useGrid({
     ...props,
-    ref,
+    ref: domRef,
     'aria-label': 'List',
     focusMode: 'cell'
   }, gridState);
@@ -229,7 +241,7 @@ function DroppableGrid(props) {
   return (
     <div
       {...mergeProps(collectionProps, gridProps)}
-      ref={ref}
+      ref={domRef}
       className={classNames(dndStyles, 'droppable-collection', {'is-drop-target': isDropTarget})}
       style={props.style}
       data-droptarget={isDropTarget}
@@ -247,7 +259,7 @@ function DroppableGrid(props) {
         <React.Fragment key={item.key}>
           <InsertionIndicator
             key={item.key + '-before'}
-            collectionRef={ref}
+            collectionRef={domRef}
             target={{type: 'item', key: item.key, dropPosition: 'before'}}
             dropState={dropState} />
           <CollectionItem
@@ -260,14 +272,14 @@ function DroppableGrid(props) {
             <InsertionIndicator
               key={item.key + '-after'}
               target={{type: 'item', key: item.key, dropPosition: 'after'}}
-              collectionRef={ref}
+              collectionRef={domRef}
               dropState={dropState} />
           }
         </React.Fragment>
       ))}
     </div>
   );
-}
+});
 
 function CollectionItem({item, state, dropState, onPaste}) {
   let rowRef = React.useRef();