Merge pull request #10126 from andrewlor/fix-issue-9485

Fix Issue 9485: Drag & Drop plus icon doesn't appear on Safari
Expensify · Jul 28, 2022 · 53bff65 · 53bff65
2 parents 84c2435 + 57ba1bd
commit 53bff65
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
@@ -108,6 +108,8 @@ const IMAGE_EXTENSIONS = {
     'image/webp': 'webp',
 };
 
+const COPY_DROP_EFFECT = 'copy';
+
 /**
  * Enable Markdown parsing.
  * On web we like to have the Text Input field always focused so the user can easily type a new chat
@@ -197,13 +199,15 @@ class Composer extends React.Component {
     dragNDropListener(e) {
         let isOriginComposer = false;
         const handler = () => {
+            // Setting dropEffect for dragover is required for '+' icon on certain platforms/browsers (eg. Safari)
             switch (e.type) {
                 case 'dragover':
                     e.preventDefault();
+                    e.dataTransfer.dropEffect = COPY_DROP_EFFECT;
                     this.props.onDragOver(e, isOriginComposer);
                     break;
                 case 'dragenter':
-                    e.dataTransfer.dropEffect = 'copy';
+                    e.dataTransfer.dropEffect = COPY_DROP_EFFECT;
                     this.props.onDragEnter(e, isOriginComposer);
                     break;
                 case 'dragleave':