[BUG] Clicking the dropzone area won't open the choose file dialog on newest Chrome

Hello and thanks for the great hook. I came across this bug this morning and thought that it should be reported.

Describe the bug When clicking the dropzone, the dialog for choosing files does not appear. This might be due to browser update. Yesterday the click to open dialog was working as expected.

To Reproduce

    const { getRootProps, getInputProps } = useDropzone({
        validator: duplicateFileValidator,
        onDrop: (files: File[]) => {
            const uniques = Array.from(new Set(filesArray))
            setFilesArray([...uniques, ...files])
        },
        accept: acceptedFileTypes,
        maxSize: maxSizeBytes,
    })

<div className={styles.dropZone} {...getRootProps()} id="upload-file">
                    <input {...getInputProps()}/>
</div>

Expected behavior A dialog for choosing a file should open. Works as expected in Firefox.

Desktop (please complete the following information):

• OS: macOS 12.5.1
• Chrome 105.0.5195.102 (Official Build) (arm64)
• React-dropzone version: 11.4.2

I tried it also on the latest 14.2.2, but same bug there.

[Egr711]

Can confirm was having the same issue in Chrome 105.0.5195.125 upgrading to version 14.2.3 and updating chrome to latest 106.0.5249.119 fixed it

[immutable-pro]

I can confirm I am seeing the same behavior, using 14.2.2. It works on Firefox 104.0.2 and Gnome Web Browser 42.4, but not in Chrome 105.0.5195.125.

Some more details:

In openFileDialog callback function, window.showOpenFilePicker throws:

DOMException: Failed to execute 'showOpenFilePicker' on 'Window': Must be handling a user gesture to show a file picker.

When it tries to fall back to the inputRef click function, it fails, but it logs a warning in the console:

File chooser dialog can only be shown with a user activation.

Weirdly, some times window.showOpenFilePicker throws:

The user aborted the request