Fix the issue with click even occuring twice, try hiding the input altogether (#2307)

packages/@uppy/drag-drop/src/index.js

@@ -142,11 +142,8 @@ module.exports = class DragDrop extends Plugin {
     const restrictions = this.uppy.opts.restrictions
     return (
       <input
-        id={this.uppy.id + '-' + this.id}
-        class="uppy-DragDrop-input"
         type="file"
-        tabindex={-1}
-        focusable="false"
+        hidden
         ref={(ref) => { this.fileInputRef = ref }}
         name={this.opts.inputName}
         multiple={restrictions.maxNumberOfFiles !== 1}
@@ -166,11 +163,11 @@ module.exports = class DragDrop extends Plugin {
 
   renderLabel () {
     return (
-      <label class="uppy-DragDrop-label" for={this.uppy.id + '-' + this.id}>
+      <div class="uppy-DragDrop-label">
         {this.i18nArray('dropHereOr', {
           browse: <span class="uppy-DragDrop-browse">{this.i18n('browse')}</span>
         })}
-      </label>
+      </div>
     )
   }
 
@@ -185,7 +182,7 @@ module.exports = class DragDrop extends Plugin {
       uppy-Root
       uppy-u-reset
       uppy-DragDrop-container
-      ${this.isDragDropSupported ? 'uppy-DragDrop--is-dragdrop-supported' : ''}
+      ${this.isDragDropSupported ? 'uppy-DragDrop--isDragDropSupported' : ''}
       ${this.getPluginState().isDraggingOver ? 'uppy-DragDrop--isDraggingOver' : ''}
     `
 

packages/@uppy/drag-drop/src/style.scss

@@ -29,16 +29,6 @@
   line-height: 1.4;
 }
 
-// http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
-.uppy-DragDrop-input {
-  width: 0.1px;
-  height: 0.1px;
-  opacity: 0;
-  overflow: hidden;
-  position: absolute;
-  z-index: -1;
-}
-
 .uppy-DragDrop-arrow {
   width: 60px;
   height: 60px;
@@ -46,7 +36,7 @@
   margin-bottom: 17px;
 }
 
-  .uppy-DragDrop--is-dragdrop-supported {
+  .uppy-DragDrop--isDragDropSupported {
     border: 2px dashed lighten($gray-500, 10%);
   }