Bug 219599
| Summary: | clipboard (paste, copy, and cut) events don't fire on the focused element | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Jimmy Thomsen <jimmy> |
| Component: | HTML Editing | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | cdumez, hi, rniwa, smoley, webkit-bug-importer, wenson_hsieh |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 13 | ||
| Hardware: | Mac | ||
| OS: | macOS 10.13 | ||
Jimmy Thomsen
Steps to reproduce the problem (copied from https://bugs.chromium.org/p/chromium/issues/detail?id=1156117):
1. Go to https://jsfiddle.net/62z9uwq1/
2. Follow the reproduction steps in the JSFiddle
AND..
This bug basically makes the combination of tabIndex + onPaste in popular frameworks such as ReactJS useless, as events are intercepted at the document level and dispatched to the appropriate element based on the event argument's target property.
A) Go to https://codesandbox.io/s/react-playground-forked-9juxn?file=/index.js
B) Click in "Table cell 1" and press CTRL + V: it works!
C) Press TAB to jump to "Table cell 2" and press CTRL + V: Nothing happens, because the global OnPaste event handler configured by ReactJS never receives an OnPaste event with "Table Cell 2" as event target - only <body> is received.
It's probably safe to assume that many other frameworks are affected too.
What is the expected behavior?
OnPaste must fire for elements that gain focus programmatically or via TAB navigation.
What went wrong?
OnPaste does not fire - only if user clicked on the element first.
OnPaste fires properly in Firefox v. 83 and IEEdge 18.
Chrome 87 and ChromiumEdge 87 are also affected by this bug.
Other browsers such as IE and Opera not tested.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Smoley
Thanks for filing, I can reproduce this on Safari 13.1.3 and STP 116.
Radar WebKit Bug Importer
<rdar://problem/72063887>
Jimmy Thomsen
Same bug applies to OnCopy and OnCut.
I have extended the JSFiddle to also register OnCopy and OnCut handlers:
https://jsfiddle.net/7puam9yr/1/
A fix should probably be tested against all relevant events.
Jimmy Thomsen
Programmatically invoking cut/copy/paste does not trigger the events either, nor does it modify the clipboard (unless clicking on the focusable element first).
document.execCommand("cut");
document.execCommand("copy");
document.execCommand("paste");
Ryosuke Niwa
This isn't really about whether an element is clicked but rather if the element has the selection or not. WebKit only fires the event on the selection's endpoints' common ancestor instead of the focused element.