react-dropzone 11.5.3 → 12.0.0

package/src/index.js

@@ -7,21 +7,23 @@ import React, {
   useImperativeHandle,
   useMemo,
   useReducer,
-  useRef
-} from 'react'
-import PropTypes from 'prop-types'
-import { fromEvent } from 'file-selector'
+  useRef,
+} from "react";
+import PropTypes from "prop-types";
+import { fromEvent } from "file-selector";
 import {
   allFilesAccepted,
   composeEventHandlers,
   fileAccepted,
   fileMatchSize,
+  filePickerOptionsTypes,
+  canUseFileSystemAccessAPI,
   isEvtWithFiles,
   isIeOrEdge,
   isPropagationStopped,
   onDocumentDragOver,
-  TOO_MANY_FILES_REJECTION
-} from './utils/index'
+  TOO_MANY_FILES_REJECTION,
+} from "./utils/index";
 
 /**
  * Convenience wrapper component for the `useDropzone` hook
@@ -38,15 +40,15 @@ import {
  * ```
  */
 const Dropzone = forwardRef(({ children, ...params }, ref) => {
-  const { open, ...props } = useDropzone(params)
+  const { open, ...props } = useDropzone(params);
 
-  useImperativeHandle(ref, () => ({ open }), [open])
+  useImperativeHandle(ref, () => ({ open }), [open]);
 
   // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
-  return <Fragment>{children({ ...props, open })}</Fragment>
-})
+  return <Fragment>{children({ ...props, open })}</Fragment>;
+});
 
-Dropzone.displayName = 'Dropzone'
+Dropzone.displayName = "Dropzone";
 
 // Add default props for react-docgen
 const defaultProps = {
@@ -61,10 +63,11 @@ const defaultProps = {
   noKeyboard: false,
   noDrag: false,
   noDragEventsBubbling: false,
-  validator: null
-}
+  validator: null,
+  useFsAccessApi: true,
+};
 
-Dropzone.defaultProps = defaultProps
+Dropzone.defaultProps = defaultProps;
 
 Dropzone.propTypes = {
   /**
@@ -93,7 +96,10 @@ Dropzone.propTypes = {
    * Windows. In some cases there might not be a mime type set at all.
    * See: https://github.com/react-dropzone/react-dropzone/issues/276
    */
-  accept: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accept: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
 
   /**
    * Allow drag 'n' drop (or selection from the file dialog) of multiple files
@@ -158,11 +164,17 @@ Dropzone.propTypes = {
    */
   onFileDialogCancel: PropTypes.func,
 
-    /**
-     * Cb for when opening the file dialog
-     */
+  /**
+   * Cb for when opening the file dialog
+   */
   onFileDialogOpen: PropTypes.func,
 
+  /**
+   * Set to true to use the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API
+   * to open the file picker instead of using an `<input type="file">` click event.
+   */
+  useFsAccessApi: PropTypes.bool,
+
   /**
    * Cb for when the `dragenter` event occurs.
    *
@@ -239,10 +251,10 @@ Dropzone.propTypes = {
    * @param {File} file
    * @returns {FileError|FileError[]}
    */
-  validator: PropTypes.func
-}
+  validator: PropTypes.func,
+};
 
-export default Dropzone
+export default Dropzone;
 
 /**
  * A function that is invoked for the `dragenter`,
@@ -316,8 +328,8 @@ const initialState = {
   isDragReject: false,
   draggedFiles: [],
   acceptedFiles: [],
-  fileRejections: []
-}
+  fileRejections: [],
+};
 
 /**
  * A React hook that creates a drag 'n' drop area.
@@ -359,6 +371,8 @@ const initialState = {
  * @param {boolean} [props.disabled=false] Enable/disable the dropzone
  * @param {getFilesFromEvent} [props.getFilesFromEvent] Use this to provide a custom file aggregator
  * @param {Function} [props.onFileDialogCancel] Cb for when closing the file dialog with no selection
+ * @param {boolean} [props.useFsAccessApi] Set to true to use the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API
+ * to open the file picker instead of using an `<input type="file">` click event.
  * @param {Function} [props.onFileDialogOpen] Cb for when opening the file dialog
  * @param {dragCb} [props.onDragEnter] Cb for when the `dragenter` event occurs.
  * @param {dragCb} [props.onDragLeave] Cb for when the `dragleave` event occurs
@@ -409,34 +423,33 @@ export function useDropzone(options = {}) {
     onDropRejected,
     onFileDialogCancel,
     onFileDialogOpen,
+    useFsAccessApi,
     preventDropOnDocument,
     noClick,
     noKeyboard,
     noDrag,
     noDragEventsBubbling,
-    validator
+    validator,
   } = {
     ...defaultProps,
-    ...options
-  }
+    ...options,
+  };
 
-  const rootRef = useRef(null)
-  const inputRef = useRef(null)
+  const onFileDialogOpenCb = useMemo(
+    () => (typeof onFileDialogOpen === "function" ? onFileDialogOpen : noop),
+    [onFileDialogOpen]
+  );
+  const onFileDialogCancelCb = useMemo(
+    () =>
+      typeof onFileDialogCancel === "function" ? onFileDialogCancel : noop,
+    [onFileDialogCancel]
+  );
 
-  const [state, dispatch] = useReducer(reducer, initialState)
-  const { isFocused, isFileDialogActive, draggedFiles } = state
+  const rootRef = useRef(null);
+  const inputRef = useRef(null);
 
-  // Fn for opening the file dialog programmatically
-  const openFileDialog = useCallback(() => {
-    if (inputRef.current) {
-      dispatch({ type: 'openDialog' })
-      if (typeof onFileDialogOpen === 'function') {
-        onFileDialogOpen()
-      }
-      inputRef.current.value = null
-      inputRef.current.click()
-    }
-  }, [dispatch, onFileDialogOpen])
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const { isFocused, isFileDialogActive, draggedFiles } = state;
 
   // Update file dialog active state when the window is focused on
   const onWindowFocus = () => {
@@ -444,299 +457,356 @@ export function useDropzone(options = {}) {
     if (isFileDialogActive) {
       setTimeout(() => {
         if (inputRef.current) {
-          const { files } = inputRef.current
+          const { files } = inputRef.current;
 
           if (!files.length) {
-            dispatch({ type: 'closeDialog' })
-
-            if (typeof onFileDialogCancel === 'function') {
-              onFileDialogCancel()
-            }
+            dispatch({ type: "closeDialog" });
+            onFileDialogCancelCb();
           }
         }
-      }, 300)
+      }, 300);
     }
-  }
+  };
   useEffect(() => {
-    window.addEventListener('focus', onWindowFocus, false)
-    return () => {
-      window.removeEventListener('focus', onWindowFocus, false)
-    }
-  }, [inputRef, isFileDialogActive, onFileDialogCancel])
-
-  // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
-  const onKeyDownCb = useCallback(
-    event => {
-      // Ignore keyboard events bubbling up the DOM tree
-      if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {
-        return
-      }
-
-      if (event.keyCode === 32 || event.keyCode === 13) {
-        event.preventDefault()
-        openFileDialog()
-      }
-    },
-    [rootRef, inputRef, openFileDialog]
-  )
-
-  // Update focus state for the dropzone
-  const onFocusCb = useCallback(() => {
-    dispatch({ type: 'focus' })
-  }, [])
-  const onBlurCb = useCallback(() => {
-    dispatch({ type: 'blur' })
-  }, [])
-
-  // Cb to open the file dialog when click occurs on the dropzone
-  const onClickCb = useCallback(() => {
-    if (noClick) {
-      return
+    if (useFsAccessApi && canUseFileSystemAccessAPI()) {
+      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, openFileDialog])
+    window.addEventListener("focus", onWindowFocus, false);
+    return () => {
+      window.removeEventListener("focus", onWindowFocus, false);
+    };
+  }, [inputRef, isFileDialogActive, onFileDialogCancelCb, useFsAccessApi]);
 
-  const dragTargetsRef = useRef([])
-  const onDocumentDrop = event => {
+  const dragTargetsRef = useRef([]);
+  const onDocumentDrop = (event) => {
     if (rootRef.current && rootRef.current.contains(event.target)) {
       // If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler
-      return
+      return;
     }
-    event.preventDefault()
-    dragTargetsRef.current = []
-  }
+    event.preventDefault();
+    dragTargetsRef.current = [];
+  };
 
   useEffect(() => {
     if (preventDropOnDocument) {
-      document.addEventListener('dragover', onDocumentDragOver, false)
-      document.addEventListener('drop', onDocumentDrop, false)
+      document.addEventListener("dragover", onDocumentDragOver, false);
+      document.addEventListener("drop", onDocumentDrop, false);
     }
 
     return () => {
       if (preventDropOnDocument) {
-        document.removeEventListener('dragover', onDocumentDragOver)
-        document.removeEventListener('drop', onDocumentDrop)
+        document.removeEventListener("dragover", onDocumentDragOver);
+        document.removeEventListener("drop", onDocumentDrop);
       }
-    }
-  }, [rootRef, preventDropOnDocument])
+    };
+  }, [rootRef, preventDropOnDocument]);
 
   const onDragEnterCb = useCallback(
-    event => {
-      event.preventDefault()
+    (event) => {
+      event.preventDefault();
       // Persist here because we need the event later after getFilesFromEvent() is done
-      event.persist()
-      stopPropagation(event)
+      event.persist();
+      stopPropagation(event);
 
-      dragTargetsRef.current = [...dragTargetsRef.current, event.target]
+      dragTargetsRef.current = [...dragTargetsRef.current, event.target];
 
       if (isEvtWithFiles(event)) {
-        Promise.resolve(getFilesFromEvent(event)).then(draggedFiles => {
+        Promise.resolve(getFilesFromEvent(event)).then((draggedFiles) => {
           if (isPropagationStopped(event) && !noDragEventsBubbling) {
-            return
+            return;
           }
 
           dispatch({
             draggedFiles,
             isDragActive: true,
-            type: 'setDraggedFiles'
-          })
+            type: "setDraggedFiles",
+          });
 
           if (onDragEnter) {
-            onDragEnter(event)
+            onDragEnter(event);
           }
-        })
+        });
       }
     },
     [getFilesFromEvent, onDragEnter, noDragEventsBubbling]
-  )
+  );
 
   const onDragOverCb = useCallback(
-    event => {
-      event.preventDefault()
-      event.persist()
-      stopPropagation(event)
+    (event) => {
+      event.preventDefault();
+      event.persist();
+      stopPropagation(event);
 
       const hasFiles = isEvtWithFiles(event);
       if (hasFiles && event.dataTransfer) {
         try {
-          event.dataTransfer.dropEffect = 'copy'
+          event.dataTransfer.dropEffect = "copy";
         } catch {} /* eslint-disable-line no-empty */
       }
 
       if (hasFiles && onDragOver) {
-        onDragOver(event)
+        onDragOver(event);
       }
 
-      return false
+      return false;
     },
     [onDragOver, noDragEventsBubbling]
-  )
+  );
 
   const onDragLeaveCb = useCallback(
-    event => {
-      event.preventDefault()
-      event.persist()
-      stopPropagation(event)
+    (event) => {
+      event.preventDefault();
+      event.persist();
+      stopPropagation(event);
 
       // Only deactivate once the dropzone and all children have been left
       const targets = dragTargetsRef.current.filter(
-        target => rootRef.current && rootRef.current.contains(target)
-      )
+        (target) => rootRef.current && rootRef.current.contains(target)
+      );
       // Make sure to remove a target present multiple times only once
       // (Firefox may fire dragenter/dragleave multiple times on the same element)
-      const targetIdx = targets.indexOf(event.target)
+      const targetIdx = targets.indexOf(event.target);
       if (targetIdx !== -1) {
-        targets.splice(targetIdx, 1)
+        targets.splice(targetIdx, 1);
       }
-      dragTargetsRef.current = targets
+      dragTargetsRef.current = targets;
       if (targets.length > 0) {
-        return
+        return;
       }
 
       dispatch({
         isDragActive: false,
-        type: 'setDraggedFiles',
-        draggedFiles: []
-      })
+        type: "setDraggedFiles",
+        draggedFiles: [],
+      });
 
       if (isEvtWithFiles(event) && onDragLeave) {
-        onDragLeave(event)
+        onDragLeave(event);
       }
     },
     [rootRef, onDragLeave, noDragEventsBubbling]
-  )
+  );
 
-  const onDropCb = useCallback(
-    event => {
-      event.preventDefault()
-      // Persist here because we need the event later after getFilesFromEvent() is done
-      event.persist()
-      stopPropagation(event)
+  const setFiles = useCallback(
+    (files, event) => {
+      const acceptedFiles = [];
+      const fileRejections = [];
 
-      dragTargetsRef.current = []
+      files.forEach((file) => {
+        const [accepted, acceptError] = fileAccepted(file, accept);
+        const [sizeMatch, sizeError] = fileMatchSize(file, minSize, maxSize);
+        const customErrors = validator ? validator(file) : null;
 
-      if (isEvtWithFiles(event)) {
-        Promise.resolve(getFilesFromEvent(event)).then(files => {
-          if (isPropagationStopped(event) && !noDragEventsBubbling) {
-            return
-          }
+        if (accepted && sizeMatch && !customErrors) {
+          acceptedFiles.push(file);
+        } else {
+          let errors = [acceptError, sizeError];
 
-          const acceptedFiles = []
-          const fileRejections = []
-
-          files.forEach(file => {
-            const [accepted, acceptError] = fileAccepted(file, accept)
-            const [sizeMatch, sizeError] = fileMatchSize(file, minSize, maxSize)
-            const customErrors = validator ? validator(file) : null;
-
-            if (accepted && sizeMatch && !customErrors) {
-              acceptedFiles.push(file)
-            } else {
-              let errors = [acceptError, sizeError];
-
-              if (customErrors) {
-                errors = errors.concat(customErrors);
-              }
-
-              fileRejections.push({ file, errors: errors.filter(e => e) })
-            }
-          })
-
-          if ((!multiple && acceptedFiles.length > 1) || (multiple && maxFiles >= 1 &&  acceptedFiles.length > maxFiles)) {
-            // Reject everything and empty accepted files
-            acceptedFiles.forEach(file => {
-              fileRejections.push({ file, errors: [TOO_MANY_FILES_REJECTION] })
-            })
-            acceptedFiles.splice(0)
+          if (customErrors) {
+            errors = errors.concat(customErrors);
           }
 
-          dispatch({
-            acceptedFiles,
-            fileRejections,
-            type: 'setFiles'
-          })
+          fileRejections.push({ file, errors: errors.filter((e) => e) });
+        }
+      });
+
+      if (
+        (!multiple && acceptedFiles.length > 1) ||
+        (multiple && maxFiles >= 1 && acceptedFiles.length > maxFiles)
+      ) {
+        // Reject everything and empty accepted files
+        acceptedFiles.forEach((file) => {
+          fileRejections.push({ file, errors: [TOO_MANY_FILES_REJECTION] });
+        });
+        acceptedFiles.splice(0);
+      }
 
-          if (onDrop) {
-            onDrop(acceptedFiles, fileRejections, event)
-          }
+      dispatch({
+        acceptedFiles,
+        fileRejections,
+        type: "setFiles",
+      });
 
-          if (fileRejections.length > 0 && onDropRejected) {
-            onDropRejected(fileRejections, event)
-          }
+      if (onDrop) {
+        onDrop(acceptedFiles, fileRejections, event);
+      }
 
-          if (acceptedFiles.length > 0 && onDropAccepted) {
-            onDropAccepted(acceptedFiles, event)
-          }
-        })
+      if (fileRejections.length > 0 && onDropRejected) {
+        onDropRejected(fileRejections, event);
+      }
+
+      if (acceptedFiles.length > 0 && onDropAccepted) {
+        onDropAccepted(acceptedFiles, event);
       }
-      dispatch({ type: 'reset' })
     },
     [
+      dispatch,
       multiple,
       accept,
       minSize,
       maxSize,
       maxFiles,
-      getFilesFromEvent,
       onDrop,
       onDropAccepted,
       onDropRejected,
-      noDragEventsBubbling,
-      validator
+      validator,
     ]
-  )
+  );
 
-  const composeHandler = fn => {
-    return disabled ? null : fn
-  }
+  const onDropCb = useCallback(
+    (event) => {
+      event.preventDefault();
+      // Persist here because we need the event later after getFilesFromEvent() is done
+      event.persist();
+      stopPropagation(event);
 
-  const composeKeyboardHandler = fn => {
-    return noKeyboard ? null : composeHandler(fn)
-  }
+      dragTargetsRef.current = [];
 
-  const composeDragHandler = fn => {
-    return noDrag ? null : composeHandler(fn)
-  }
+      if (isEvtWithFiles(event)) {
+        Promise.resolve(getFilesFromEvent(event)).then((files) => {
+          if (isPropagationStopped(event) && !noDragEventsBubbling) {
+            return;
+          }
+          setFiles(files, event);
+        });
+      }
+      dispatch({ type: "reset" });
+    },
+    [getFilesFromEvent, setFiles, noDragEventsBubbling]
+  );
+
+  // Fn for opening the file dialog programmatically
+  const openFileDialog = useCallback(() => {
+    if (useFsAccessApi && canUseFileSystemAccessAPI()) {
+      dispatch({ type: "openDialog" });
+      onFileDialogOpenCb();
+      // https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker
+      const opts = {
+        multiple,
+        types: filePickerOptionsTypes(accept),
+      };
+      window
+        .showOpenFilePicker(opts)
+        .then((handles) => getFilesFromEvent(handles))
+        .then((files) => setFiles(files, null))
+        .catch((e) => onFileDialogCancelCb(e))
+        .finally(() => dispatch({ type: "closeDialog" }));
+      return;
+    }
+
+    if (inputRef.current) {
+      dispatch({ type: "openDialog" });
+      onFileDialogOpenCb();
+      inputRef.current.value = null;
+      inputRef.current.click();
+    }
+  }, [
+    dispatch,
+    onFileDialogOpenCb,
+    onFileDialogCancelCb,
+    useFsAccessApi,
+    setFiles,
+    accept,
+    multiple,
+  ]);
+
+  // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
+  const onKeyDownCb = useCallback(
+    (event) => {
+      // Ignore keyboard events bubbling up the DOM tree
+      if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {
+        return;
+      }
+
+      if (event.keyCode === 32 || event.keyCode === 13) {
+        event.preventDefault();
+        openFileDialog();
+      }
+    },
+    [rootRef, inputRef, openFileDialog]
+  );
+
+  // Update focus state for the dropzone
+  const onFocusCb = useCallback(() => {
+    dispatch({ type: "focus" });
+  }, []);
+  const onBlurCb = useCallback(() => {
+    dispatch({ type: "blur" });
+  }, []);
+
+  // Cb to open the file dialog when click occurs on the dropzone
+  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, openFileDialog]);
+
+  const composeHandler = (fn) => {
+    return disabled ? null : fn;
+  };
+
+  const composeKeyboardHandler = (fn) => {
+    return noKeyboard ? null : composeHandler(fn);
+  };
+
+  const composeDragHandler = (fn) => {
+    return noDrag ? null : composeHandler(fn);
+  };
 
-  const stopPropagation = event => {
+  const stopPropagation = (event) => {
     if (noDragEventsBubbling) {
-      event.stopPropagation()
+      event.stopPropagation();
     }
-  }
+  };
 
   const getRootProps = useMemo(
-    () => ({
-      refKey = 'ref',
-      onKeyDown,
-      onFocus,
-      onBlur,
-      onClick,
-      onDragEnter,
-      onDragOver,
-      onDragLeave,
-      onDrop,
-      ...rest
-    } = {}) => ({
-      onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),
-      onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),
-      onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
-      onClick: composeHandler(composeEventHandlers(onClick, onClickCb)),
-      onDragEnter: composeDragHandler(composeEventHandlers(onDragEnter, onDragEnterCb)),
-      onDragOver: composeDragHandler(composeEventHandlers(onDragOver, onDragOverCb)),
-      onDragLeave: composeDragHandler(composeEventHandlers(onDragLeave, onDragLeaveCb)),
-      onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb)),
-      [refKey]: rootRef,
-      ...(!disabled && !noKeyboard ? { tabIndex: 0 } : {}),
-      ...rest
-    }),
+    () =>
+      ({
+        refKey = "ref",
+        role,
+        onKeyDown,
+        onFocus,
+        onBlur,
+        onClick,
+        onDragEnter,
+        onDragOver,
+        onDragLeave,
+        onDrop,
+        ...rest
+      } = {}) => ({
+        onKeyDown: composeKeyboardHandler(
+          composeEventHandlers(onKeyDown, onKeyDownCb)
+        ),
+        onFocus: composeKeyboardHandler(
+          composeEventHandlers(onFocus, onFocusCb)
+        ),
+        onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
+        onClick: composeHandler(composeEventHandlers(onClick, onClickCb)),
+        onDragEnter: composeDragHandler(
+          composeEventHandlers(onDragEnter, onDragEnterCb)
+        ),
+        onDragOver: composeDragHandler(
+          composeEventHandlers(onDragOver, onDragOverCb)
+        ),
+        onDragLeave: composeDragHandler(
+          composeEventHandlers(onDragLeave, onDragLeaveCb)
+        ),
+        onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb)),
+        role: typeof role === "string" && role !== "" ? role : "button",
+        [refKey]: rootRef,
+        ...(!disabled && !noKeyboard ? { tabIndex: 0 } : {}),
+        ...rest,
+      }),
     [
       rootRef,
       onKeyDownCb,
@@ -749,39 +819,51 @@ export function useDropzone(options = {}) {
       onDropCb,
       noKeyboard,
       noDrag,
-      disabled
+      disabled,
     ]
-  )
+  );
 
-  const onInputElementClick = useCallback(event => {
-    event.stopPropagation()
-  }, [])
+  const onInputElementClick = useCallback((event) => {
+    event.stopPropagation();
+  }, []);
 
   const getInputProps = useMemo(
-    () => ({ refKey = 'ref', onChange, onClick, ...rest } = {}) => {
-      const inputProps = {
-        accept,
-        multiple,
-        type: 'file',
-        style: { display: 'none' },
-        onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),
-        onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),
-        autoComplete: 'off',
-        tabIndex: -1,
-        [refKey]: inputRef
-      }
-
-      return {
-        ...inputProps,
-        ...rest
-      }
-    },
+    () =>
+      ({ refKey = "ref", onChange, onClick, ...rest } = {}) => {
+        const inputProps = {
+          accept,
+          multiple,
+          type: "file",
+          style: { display: "none" },
+          onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),
+          onClick: composeHandler(
+            composeEventHandlers(onClick, onInputElementClick)
+          ),
+          autoComplete: "off",
+          tabIndex: -1,
+          [refKey]: inputRef,
+        };
+
+        return {
+          ...inputProps,
+          ...rest,
+        };
+      },
     [inputRef, accept, multiple, onDropCb, disabled]
-  )
+  );
 
-  const fileCount = draggedFiles.length
-  const isDragAccept = fileCount > 0 && allFilesAccepted({ files: draggedFiles, accept, minSize, maxSize, multiple, maxFiles })
-  const isDragReject = fileCount > 0 && !isDragAccept
+  const fileCount = draggedFiles.length;
+  const isDragAccept =
+    fileCount > 0 &&
+    allFilesAccepted({
+      files: draggedFiles,
+      accept,
+      minSize,
+      maxSize,
+      multiple,
+      maxFiles,
+    });
+  const isDragReject = fileCount > 0 && !isDragAccept;
 
   return {
     ...state,
@@ -792,54 +874,56 @@ export function useDropzone(options = {}) {
     getInputProps,
     rootRef,
     inputRef,
-    open: composeHandler(openFileDialog)
-  }
+    open: composeHandler(openFileDialog),
+  };
 }
 
 function reducer(state, action) {
   /* istanbul ignore next */
   switch (action.type) {
-    case 'focus':
+    case "focus":
       return {
         ...state,
-        isFocused: true
-      }
-    case 'blur':
+        isFocused: true,
+      };
+    case "blur":
       return {
         ...state,
-        isFocused: false
-      }
-    case 'openDialog':
+        isFocused: false,
+      };
+    case "openDialog":
       return {
-        ...state,
-        isFileDialogActive: true
-      }
-    case 'closeDialog':
+        ...initialState,
+        isFileDialogActive: true,
+      };
+    case "closeDialog":
       return {
         ...state,
-        isFileDialogActive: false
-      }
-    case 'setDraggedFiles':
+        isFileDialogActive: false,
+      };
+    case "setDraggedFiles":
       /* eslint no-case-declarations: 0 */
-      const { isDragActive, draggedFiles } = action
+      const { isDragActive, draggedFiles } = action;
       return {
         ...state,
         draggedFiles,
-        isDragActive
-      }
-    case 'setFiles':
+        isDragActive,
+      };
+    case "setFiles":
       return {
         ...state,
         acceptedFiles: action.acceptedFiles,
-        fileRejections: action.fileRejections
-      }
-    case 'reset':
+        fileRejections: action.fileRejections,
+      };
+    case "reset":
       return {
-        ...initialState
-      }
+        ...initialState,
+      };
     default:
-      return state
+      return state;
   }
 }
 
-export { ErrorCode } from './utils'
+function noop() {}
+
+export { ErrorCode } from "./utils";