Uppy: Paste works with certain quirks in Chrome

[serverdevil]

Referring to the uppy.io Live Demo.

Have a .PNG open in your editor/viewer of choice and Copy the image (Ctrl+C or context menu based)

In Chrome

• Click on Uppy dialog in empty area or on 'Drop files here, past...'
• Press Tab which sends focus to 'Browse' (cue: should underline the text)
• Press Ctrl-V
• Nothing happens

In Firefox

• After all the above steps
• Press Ctrl-V
• Image is uploaded

Chrome seems to require a mouse click anywhere on the Uppy dialog but the buttons (Browse or any of the provider buttons). Subsequent to that click, Ctrl-V seems to work.

openModal() seems to set focus on Browse button which is the state of an Uppy modal popup that I have replicated in the steps above.

Can you guys shed light on why this seems to be an issue with Chrome? Seems like onPaste is not fired on inputs/button. So my logical step was to grab handle on uppy-Root or an inner div and call focus() and then trigger the Ctrl-V but that doesn't work either. Nothing seems to work except for when I click with the mouse on the dialog.

Please help! My bottom line would be, "If I launch Uppy modal with out openModal() called, how can I have a default state where I press Ctrl-V after the launch and the image gets pasted (without having to click inside the modal)"

[arturi]

I can confirm this, Chrome won’t accept paste when focus is on buttons, only after you click somewhere on the Dashboard. @lakesare, could you please take a look? Is there a fix?

[serverdevil]

If there is a way to simulate that click without any user interaction, it would be awesome! Thanks.

[lakesare]

@arturi,

I PRed a fix for this issue https://github.com/transloadit/uppy/pull/1583 (it's based on the /accessibility PR, I wanted to use a function from that PR initially).

If we are focused on a button, paste event will fire on the body, unless we make the button contenteditable (which isn't a good option, it introduces a visible cursor, and makes us manage onChange={event.preventDefault}s for each button).
Another option is listening to all 'paste' events in the document, and that's what I implemented, I explained it properly here: https://github.com/transloadit/uppy/pull/1583/commits/9b0ada38633f9fe80cc0ab435dba752e55c36799#diff-5a8fe6491fd184c6583525fce647911cR532.

I'd argue most people are used to clicking on an element if they want to paste something (I do so at least), but maybe this PR could save some confusion.

[arturi]

https://github.com/transloadit/uppy/pull/1619 was merged, so pasting in Chrome will be improved in the next Dashboard release.