Skip to content
Permalink
Browse files

fix: fix click event propagation and close #826

  • Loading branch information
rolandjitsu committed Jul 21, 2019
1 parent 93bded7 commit a159354d6281ea2a2cd92f1b1d4a5510412a1fe2
Showing with 17 additions and 24 deletions.
  1. +17 −22 src/index.js
  2. +0 −2 src/index.spec.js
@@ -454,27 +454,20 @@ export function useDropzone({
}, [])

// Cb to open the file dialog when click occurs on the dropzone
const onClickCb = useCallback(
event => {
// Prevent click events from propagating to the <input> when the click event
// originated from a <label> that wraps the dropzone
event.preventDefault()

if (noClick) {
return
}
const onClickCb = useCallback(() => {
if (noClick) {
return
}

// In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()
// to ensure React can handle state changes
// See: https://github.com/react-dropzone/react-dropzone/issues/450
if (isIeOrEdge()) {
setTimeout(openFileDialog, 0)
} else {
openFileDialog()
}
},
[inputRef, noClick]
)
// In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()
// to ensure React can handle state changes
// See: https://github.com/react-dropzone/react-dropzone/issues/450
if (isIeOrEdge()) {
setTimeout(openFileDialog, 0)
} else {
openFileDialog()
}
}, [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
@@ -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)
})
})

0 comments on commit a159354

Please sign in to comment.
You can’t perform that action at this time.