fix: fix click event propagation and close #826

react-dropzone · Jul 21, 2019 · a159354 · a159354
1 parent 93bded7
commit a159354
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 24 deletions.
diff --git a/src/index.js b/src/index.js
@@ -454,27 +454,20 @@ export function useDropzone({
   }, [])
 
   // Cb to open the file dialog when click occurs on the dropzone
-  const onClickCb = useCallback(
+  const onClickCb = useCallback(() => {
-    event => {
+    if (noClick) {
-      // Prevent click events from propagating to the <input> when the click event
+      return
-      // originated from a <label> that wraps the dropzone
+    }
-      event.preventDefault()
-
-      if (noClick) {
-        return
-      }
 
-      // In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()
+    // In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()
-      // to ensure React can handle state changes
+    // to ensure React can handle state changes
-      // See: https://github.com/react-dropzone/react-dropzone/issues/450
+    // See: https://github.com/react-dropzone/react-dropzone/issues/450
-      if (isIeOrEdge()) {
+    if (isIeOrEdge()) {
-        setTimeout(openFileDialog, 0)
+      setTimeout(openFileDialog, 0)
-      } else {
+    } else {
-        openFileDialog()
+      openFileDialog()
-      }
+    }
-    },
+  }, [inputRef, noClick])
-    [inputRef, noClick]
-  )
 
   const [dragTargets, setDragTargets] = useState([])
   const onDocumentDrop = event => {
@@ -688,6 +681,7 @@ export function useDropzone({
       onDragLeave: composeDragHandler(composeEventHandlers(onDragLeave, onDragLeaveCb)),
       onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb)),
       [refKey]: rootRef,
+      ...(rootRef.current && rootRef.current.tagName === 'LABEL' ? { htmlFor: 'noop' } : {}),
       ...(!disabled && !noKeyboard ? { tabIndex: 0 } : {}),
       ...rest
     }),
@@ -712,7 +706,7 @@ export function useDropzone({
   }, [])
 
   const getInputProps = useMemo(
-    () => ({ refKey = 'ref', onChange, onClick, ...rest } = {}) => {
+    () => ({ refKey = 'ref', onChange, onClick, disabled, ...rest } = {}) => {
       const inputProps = {
         accept,
         multiple,
@@ -722,6 +716,7 @@ export function useDropzone({
         onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),
         autoComplete: 'off',
         tabIndex: -1,
+        disabled: disabled || noClick,
         [refKey]: inputRef
       }
 
@@ -730,7 +725,7 @@ export function useDropzone({
         ...rest
       }
     },
-    [inputRef, accept, multiple, onDropCb, disabled]
+    [inputRef, accept, multiple, onDropCb, disabled, noClick]
   )
 
   const fileCount = draggedFiles.length

diff --git a/src/index.spec.js b/src/index.spec.js
@@ -530,14 +530,12 @@ describe('useDropzone() hook', () => {
       const dropzone = container.querySelector('label')
 
       const event = new Event('click', { bubbles: true, cancelable: true })
-      const preventDefaultSpy = jest.spyOn(event, 'preventDefault')
 
       fireEvent(dropzone, event)
 
       const ref = activeRef.current
       expect(ref).not.toBeNull()
       expect(dropzone).toContainElement(ref)
-      expect(preventDefaultSpy).toHaveBeenCalled()
       expect(onClickSpy).toHaveBeenCalledTimes(1)
     })
   })