Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Paste works with certain quirks in Chrome #1577

Closed
serverdevil opened this issue May 21, 2019 · 4 comments · Fixed by #1619
Closed

Paste works with certain quirks in Chrome #1577

serverdevil opened this issue May 21, 2019 · 4 comments · Fixed by #1619
Assignees
Labels

Comments

@serverdevil
Copy link

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
Copy link
Contributor

arturi commented May 21, 2019

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
Copy link
Author

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

@lakesare
Copy link
Contributor

@arturi,

I PRed a fix for this issue #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: 9b0ada3#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
Copy link
Contributor

arturi commented May 31, 2019

#1619 was merged, so pasting in Chrome will be improved in the next Dashboard release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
3 participants