Handle drag and drop modifier keys more consistently across browsers (#3479)

devongovett · web-flow · commit b2aaa7a03c1c · 2022-09-07T17:36:24.000-07:00
diff --git a/packages/@react-aria/dnd/src/constants.ts b/packages/@react-aria/dnd/src/constants.ts
@@ -32,6 +32,8 @@ export const DROP_OPERATION_ALLOWED = {
 };
 
 export const EFFECT_ALLOWED = invert(DROP_OPERATION_ALLOWED);
+EFFECT_ALLOWED[DROP_OPERATION.all] = 'all'; // ensure we don't map to 'uninitialized'.
+
 export const DROP_EFFECT = invert(DROP_OPERATION);
 export const DROP_EFFECT_TO_DROP_OPERATION: {[name: string]: DropOperation} = {
   none: 'cancel',
diff --git a/packages/@react-aria/dnd/src/useDrag.ts b/packages/@react-aria/dnd/src/useDrag.ts
@@ -17,8 +17,8 @@ import * as DragManager from './DragManager';
 import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, EFFECT_ALLOWED} from './constants';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {setGlobalAllowedDropOperations, useDragModality} from './utils';
 import {useDescription, useGlobalListeners} from '@react-aria/utils';
-import {useDragModality} from './utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {writeToDataTransfer} from './utils';
 
@@ -79,16 +79,18 @@ export function useDrag(options: DragOptions): DragResult {
     let items = options.getItems();
     writeToDataTransfer(e.dataTransfer, items);
 
+    let allowed = DROP_OPERATION.all;
     if (typeof options.getAllowedDropOperations === 'function') {
       let allowedOperations = options.getAllowedDropOperations();
-      let allowed = DROP_OPERATION.none;
+      allowed = DROP_OPERATION.none;
       for (let operation of allowedOperations) {
         allowed |= DROP_OPERATION[operation] || DROP_OPERATION.none;
       }
-
-      e.dataTransfer.effectAllowed = EFFECT_ALLOWED[allowed] || 'none';
     }
 
+    setGlobalAllowedDropOperations(allowed);
+    e.dataTransfer.effectAllowed = EFFECT_ALLOWED[allowed] || 'none';
+
     // If there is a preview option, use it to render a custom preview image that will
     // appear under the pointer while dragging. If not, the element itself is dragged by the browser.
     if (typeof options.preview?.current === 'function') {
@@ -161,6 +163,7 @@ export function useDrag(options: DragOptions): DragResult {
 
     setDragging(false);
     removeAllGlobalListeners();
+    setGlobalAllowedDropOperations(DROP_OPERATION.none);
   };
 
   let onPress = (e: PressEvent) => {
diff --git a/packages/@react-aria/dnd/src/useDrop.ts b/packages/@react-aria/dnd/src/useDrop.ts
@@ -12,10 +12,10 @@
 
 import {DragEvent, HTMLAttributes, RefObject,  useRef, useState} from 'react';
 import * as DragManager from './DragManager';
-import {DragTypes, readFromDataTransfer} from './utils';
+import {DragTypes, globalAllowedDropOperations, readFromDataTransfer} from './utils';
 import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, DROP_OPERATION_ALLOWED, DROP_OPERATION_TO_DROP_EFFECT} from './constants';
 import {DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DropOperation, DragTypes as IDragTypes} from '@react-types/shared';
-import {useLayoutEffect} from '@react-aria/utils';
+import {isIPad, isMac, useLayoutEffect} from '@react-aria/utils';
 import {useVirtualDrop} from './useVirtualDrop';
 
 export interface DropOptions {
@@ -55,7 +55,7 @@ export function useDrop(options: DropOptions): DropResult {
     y: 0,
     dragOverElements: new Set<Element>(),
     dropEffect: 'none' as DataTransfer['dropEffect'],
-    effectAllowed: 'none' as DataTransfer['effectAllowed'],
+    allowedOperations: DROP_OPERATION.all,
     dropActivateTimer: null
   }).current;
 
@@ -89,7 +89,8 @@ export function useDrop(options: DropOptions): DropResult {
     e.preventDefault();
     e.stopPropagation();
 
-    if (e.clientX === state.x && e.clientY === state.y && e.dataTransfer.effectAllowed === state.effectAllowed) {
+    let allowedOperations = getAllowedOperations(e);
+    if (e.clientX === state.x && e.clientY === state.y && allowedOperations === state.allowedOperations) {
       e.dataTransfer.dropEffect = state.dropEffect;
       return;
     }
@@ -100,29 +101,27 @@ export function useDrop(options: DropOptions): DropResult {
     let prevDropEffect = state.dropEffect;
 
     // Update drop effect if allowed drop operations changed (e.g. user pressed modifier key).
-    if (e.dataTransfer.effectAllowed !== state.effectAllowed) {
-      let allowedOperations = effectAllowedToOperations(e.dataTransfer.effectAllowed);
-      let dropOperation = allowedOperations[0];
+    if (allowedOperations !== state.allowedOperations) {
+      let allowedOps = allowedOperationsToArray(allowedOperations);
+      let dropOperation = allowedOps[0];
       if (typeof options.getDropOperation === 'function') {
         let types = new DragTypes(e.dataTransfer);
-        dropOperation = getDropOperation(e.dataTransfer.effectAllowed, options.getDropOperation(types, allowedOperations));
+        dropOperation = getDropOperation(allowedOperations, options.getDropOperation(types, allowedOps));
       }
-
       state.dropEffect = DROP_OPERATION_TO_DROP_EFFECT[dropOperation] || 'none';
     }
 
     if (typeof options.getDropOperationForPoint === 'function') {
-      let allowedOperations = effectAllowedToOperations(e.dataTransfer.effectAllowed);
       let types = new DragTypes(e.dataTransfer);
       let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
       let dropOperation = getDropOperation(
-        e.dataTransfer.effectAllowed,
-        options.getDropOperationForPoint(types, allowedOperations, state.x - rect.x, state.y - rect.y)
+        allowedOperations,
+        options.getDropOperationForPoint(types, allowedOperationsToArray(allowedOperations), state.x - rect.x, state.y - rect.y)
       );
       state.dropEffect = DROP_OPERATION_TO_DROP_EFFECT[dropOperation] || 'none';
     }
 
-    state.effectAllowed = e.dataTransfer.effectAllowed;
+    state.allowedOperations = allowedOperations;
     e.dataTransfer.dropEffect = state.dropEffect;
 
     // If the drop operation changes, update state and fire events appropriately.
@@ -162,26 +161,27 @@ export function useDrop(options: DropOptions): DropResult {
       return;
     }
 
-    let allowedOperations = effectAllowedToOperations(e.dataTransfer.effectAllowed);
+    let allowedOperationsBits = getAllowedOperations(e);
+    let allowedOperations = allowedOperationsToArray(allowedOperationsBits);
     let dropOperation = allowedOperations[0];
 
     if (typeof options.getDropOperation === 'function') {
       let types = new DragTypes(e.dataTransfer);
-      dropOperation = getDropOperation(e.dataTransfer.effectAllowed, options.getDropOperation(types, allowedOperations));
+      dropOperation = getDropOperation(allowedOperationsBits, options.getDropOperation(types, allowedOperations));
     }
 
     if (typeof options.getDropOperationForPoint === 'function') {
       let types = new DragTypes(e.dataTransfer);
       let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
       dropOperation = getDropOperation(
-        e.dataTransfer.effectAllowed,
+        allowedOperationsBits,
         options.getDropOperationForPoint(types, allowedOperations, e.clientX - rect.x, e.clientY - rect.y)
       );
     }
 
     state.x = e.clientX;
     state.y = e.clientY;
-    state.effectAllowed = e.dataTransfer.effectAllowed;
+    state.allowedOperations = allowedOperationsBits;
     state.dropEffect = DROP_OPERATION_TO_DROP_EFFECT[dropOperation] || 'none';
     e.dataTransfer.dropEffect = state.dropEffect;
 
@@ -294,8 +294,66 @@ export function useDrop(options: DropOptions): DropResult {
   };
 }
 
-function effectAllowedToOperations(effectAllowed: string) {
-  let allowedOperationsBits = DROP_OPERATION_ALLOWED[effectAllowed];
+function getAllowedOperations(e: DragEvent) {
+  let allowedOperations = DROP_OPERATION_ALLOWED[e.dataTransfer.effectAllowed];
+
+  // WebKit always sets effectAllowed to "copyMove" on macOS, and "all" on iOS, regardless of what was
+  // set during the dragstart event: https://bugs.webkit.org/show_bug.cgi?id=178058
+  //
+  // Android Chrome also sets effectAllowed to "copyMove" in all cases: https://bugs.chromium.org/p/chromium/issues/detail?id=1359182
+  //
+  // If the drag started within the page, we can use a global variable to get the real allowed operations.
+  // This needs to be intersected with the actual effectAllowed, which may have been filtered based on modifier keys.
+  // Unfortunately, this means that link operations do not work at all in Safari.
+  if (globalAllowedDropOperations) {
+    allowedOperations &= globalAllowedDropOperations;
+  }
+
+  // Chrome and Safari on macOS will automatically filter effectAllowed when pressing modifier keys,
+  // allowing the user to switch between move, link, and copy operations. Firefox on macOS and all
+  // Windows browsers do not do this, so do it ourselves instead. The exact keys are platform dependent.
+  // https://ux.stackexchange.com/questions/83748/what-are-the-most-common-modifier-keys-for-dragging-objects-with-a-mouse
+  //
+  // Note that none of these modifiers are ever set in WebKit due to a bug: https://bugs.webkit.org/show_bug.cgi?id=77465
+  // However, Safari does update effectAllowed correctly, so we can just rely on that.
+  let allowedModifiers = DROP_OPERATION.none;
+  if (isMac()) {
+    if (e.altKey) {
+      allowedModifiers |= DROP_OPERATION.copy;
+    }
+
+    // Chrome and Safari both use the Control key for link, even though Finder uses Command + Option.
+    // iPadOS doesn't support link operations and will not fire the drop event at all if dropEffect is set to link.
+    // https://bugs.webkit.org/show_bug.cgi?id=244701
+    if (e.ctrlKey && !isIPad()) {
+      allowedModifiers |= DROP_OPERATION.link;
+    }
+
+    if (e.metaKey) {
+      allowedModifiers |= DROP_OPERATION.move;
+    }
+  } else {
+    if (e.altKey) {
+      allowedModifiers |= DROP_OPERATION.link;
+    }
+
+    if (e.shiftKey) {
+      allowedModifiers |= DROP_OPERATION.move;
+    }
+
+    if (e.ctrlKey) {
+      allowedModifiers |= DROP_OPERATION.copy;
+    }
+  }
+
+  if (allowedModifiers) {
+    return allowedOperations & allowedModifiers;
+  }
+
+  return allowedOperations;
+}
+
+function allowedOperationsToArray(allowedOperationsBits: DROP_OPERATION) {
   let allowedOperations = [];
   if (allowedOperationsBits & DROP_OPERATION.move) {
     allowedOperations.push('move');
@@ -312,8 +370,7 @@ function effectAllowedToOperations(effectAllowed: string) {
   return allowedOperations;
 }
 
-function getDropOperation(effectAllowed: string, operation: DropOperation) {
-  let allowedOperationsBits = DROP_OPERATION_ALLOWED[effectAllowed];
+function getDropOperation(allowedOperations: DROP_OPERATION, operation: DropOperation) {
   let op = DROP_OPERATION[operation];
-  return allowedOperationsBits & op ? operation : 'cancel';
+  return allowedOperations & op ? operation : 'cancel';
 }
diff --git a/packages/@react-aria/dnd/src/utils.ts b/packages/@react-aria/dnd/src/utils.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {CUSTOM_DRAG_TYPE, GENERIC_TYPE, NATIVE_DRAG_TYPES} from './constants';
+import {CUSTOM_DRAG_TYPE, DROP_OPERATION, GENERIC_TYPE, NATIVE_DRAG_TYPES} from './constants';
 import {DirectoryItem, DragItem, DropItem, FileItem, DragTypes as IDragTypes} from '@react-types/shared';
 import {DroppableCollectionState} from '@react-stately/dnd';
 import {getInteractionModality, useInteractionModality} from '@react-aria/interactions';
@@ -302,3 +302,8 @@ async function *getEntries(item: FileSystemDirectoryEntry): AsyncIterable<FileIt
 function getEntryFile(entry: FileSystemFileEntry): Promise<File> {
   return new Promise((resolve, reject) => entry.file(resolve, reject));
 }
+
+export let globalAllowedDropOperations = DROP_OPERATION.none;
+export function setGlobalAllowedDropOperations(o: DROP_OPERATION) {
+  globalAllowedDropOperations = o;
+}
diff --git a/packages/@react-aria/dnd/test/dnd.test.js b/packages/@react-aria/dnd/test/dnd.test.js
@@ -1079,6 +1079,67 @@ describe('useDrag and useDrop', function () {
         expect(onDropExit).toHaveBeenCalledTimes(1);
       });
 
+      it('should update drop operation if modifier key is pressed and browser does not update effectAllowed', () => {
+        let onDropEnter = jest.fn();
+        let onDropExit = jest.fn();
+        let onDragEnd = jest.fn();
+        let onDrop = jest.fn();
+        let tree = render(<>
+          <Draggable onDragEnd={onDragEnd} />
+          <Droppable onDropEnter={onDropEnter} onDropExit={onDropExit} onDrop={onDrop} />
+        </>);
+
+        let draggable = tree.getByText('Drag me');
+        let droppable = tree.getByText('Drop here');
+
+        let dataTransfer = new DataTransfer();
+        fireEvent(draggable, new DragEvent('dragstart', {dataTransfer, clientX: 0, clientY: 0}));
+        expect(dataTransfer.dropEffect).toBe('none');
+
+        fireEvent(droppable, new DragEvent('dragenter', {dataTransfer, clientX: 0, clientY: 0}));
+        expect(dataTransfer.dropEffect).toBe('move');
+        expect(droppable).toHaveAttribute('data-droptarget', 'true');
+        expect(onDropEnter).toHaveBeenCalledTimes(1);
+
+        fireEvent(droppable, new DragEvent('dragover', {dataTransfer, clientX: 0, clientY: 0, altKey: true}));
+        expect(dataTransfer.dropEffect).toBe('link');
+        expect(droppable).toHaveAttribute('data-droptarget', 'true');
+        expect(onDropExit).not.toHaveBeenCalled();
+        expect(onDropEnter).toHaveBeenCalledTimes(1);
+      });
+
+      it('should handle when browser does not set effectAllowed properly', () => {
+        let onDropEnter = jest.fn();
+        let onDropExit = jest.fn();
+        let onDragEnd = jest.fn();
+        let onDrop = jest.fn();
+        let getAllowedDropOperations = jest.fn().mockImplementation(() => ['copy']);
+        let tree = render(<>
+          <Draggable onDragEnd={onDragEnd} getAllowedDropOperations={getAllowedDropOperations} />
+          <Droppable onDropEnter={onDropEnter} onDropExit={onDropExit} onDrop={onDrop} />
+        </>);
+
+        let draggable = tree.getByText('Drag me');
+        let droppable = tree.getByText('Drop here');
+
+        let dataTransfer = new DataTransfer();
+        fireEvent(draggable, new DragEvent('dragstart', {dataTransfer, clientX: 0, clientY: 0}));
+        expect(dataTransfer.effectAllowed).toBe('copy');
+
+        // Simulate WebKit bug.
+        dataTransfer.effectAllowed = 'copyMove';
+        fireEvent(droppable, new DragEvent('dragenter', {dataTransfer, clientX: 0, clientY: 0}));
+        expect(dataTransfer.dropEffect).toBe('copy');
+        expect(droppable).toHaveAttribute('data-droptarget', 'true');
+        expect(onDropEnter).toHaveBeenCalledTimes(1);
+
+        dataTransfer.effectAllowed = 'copyMove';
+        fireEvent(droppable, new DragEvent('dragover', {dataTransfer, clientX: 0, clientY: 0, altKey: true}));
+        expect(dataTransfer.dropEffect).toBe('none');
+        expect(droppable).toHaveAttribute('data-droptarget', 'false');
+        expect(onDropExit).toHaveBeenCalledTimes(1);
+      });
+
       it('should pass file types to getDropOperation', async () => {
         let getDropOperation = jest.fn().mockImplementation(() => 'move');
         let tree = render(<Droppable getDropOperation={getDropOperation} />);
