fix: Prevent onClick event being called twice on input element (react-dropzone#437)

Closes react-dropzone#252

Author: Kyle Potts

src/index.js

@@ -32,6 +32,8 @@ class Dropzone extends React.Component {
     this.onDrop = this.onDrop.bind(this)
     this.onFileDialogCancel = this.onFileDialogCancel.bind(this)
     this.setRef = this.setRef.bind(this)
+    this.setRefs = this.setRefs.bind(this)
+    this.onInputElementClick = this.onInputElementClick.bind(this)
     this.isFileDialogActive = false
     this.state = {
       draggedFiles: [],
@@ -48,6 +50,7 @@ class Dropzone extends React.Component {
       document.addEventListener('dragover', Dropzone.onDocumentDragOver, false)
       document.addEventListener('drop', this.onDocumentDrop, false)
     }
+    this.fileInputEl.addEventListener('click', this.onInputElementClick, false)
     // Tried implementing addEventListener, but didn't work out
     document.body.onfocus = this.onFileDialogCancel
   }
@@ -58,6 +61,7 @@ class Dropzone extends React.Component {
       document.removeEventListener('dragover', Dropzone.onDocumentDragOver)
       document.removeEventListener('drop', this.onDocumentDrop)
     }
+    this.fileInputEl.removeEventListener('click', this.onInputElementClick, false)
     // Can be replaced with removeEventListener, if addEventListener works
     document.body.onfocus = null
   }
@@ -196,6 +200,13 @@ class Dropzone extends React.Component {
     }
   }
 
+  onInputElementClick(evt) {
+    evt.stopPropagation()
+    if (this.props.inputProps && this.props.inputProps.onClick) {
+      this.props.inputProps.onClick()
+    }
+  }
+
   onFileDialogCancel() {
     // timeout will not recognize context of this method
     const { onFileDialogCancel } = this.props
@@ -219,6 +230,10 @@ class Dropzone extends React.Component {
     this.node = ref
   }
 
+  setRefs(ref) {
+    this.fileInputEl = ref
+  }
+
   fileMatchSize(file) {
     return file.size <= this.props.maxSize && file.size >= this.props.minSize
   }
@@ -323,7 +338,7 @@ class Dropzone extends React.Component {
       type: 'file',
       style: { display: 'none' },
       multiple: supportMultiple && multiple,
-      ref: el => this.fileInputEl = el, // eslint-disable-line
+      ref: this.setRefs,
       onChange: this.onDrop
     }
 

src/index.spec.js

@@ -246,6 +246,14 @@ describe('Dropzone', () => {
       component.find('Dropzone').simulate('click')
       expect(onClickOuterSpy.callCount).toEqual(1)
     })
+
+    it('should invoke inputProps onClick if provided', () => {
+      const inputPropsClickSpy = spy()
+      const component = mount(<Dropzone inputProps={{ onClick: inputPropsClickSpy }} />)
+
+      component.find('Dropzone').simulate('click')
+      expect(inputPropsClickSpy.callCount).toEqual(1)
+    })
   })
 
   describe('drag-n-drop', () => {