Event order of onKeyDown, onKeyPress, onKeyUp, and onPaste when using pasting (CMD + v) in Mac OS X

[aesyondu]

https://html.spec.whatwg.org/multipage/indices.html#events-2

Fired at elements when the user will insert the clipboard data in the most suitable format (if any) supported for the given context

---

Hi, I will present the issue in chronological order.

1. Initially, there was a bug in Mac OS X Safari where paste (CMD + v) was not working Can't paste values through CMD+V in Safari Mac 13.0.5  CoreyGinnivan/whocanuse#31. On further investigation, I found that webkit was firing onKeyPress and onPaste events, while chrome and firefox only fired the onPaste event.

2. I created a pen to demonstrate the issue. https://codepen.io/aesyondu/pen/KKpNXEX

3. I thought I would file a bug in webkit bugzilla and call it a day. https://bugs.webkit.org/show_bug.cgi?id=208088

4. Later, I decided that since I've already tested some keyboard events, why not test all of them. And so I modified my pen, and found out that all three browsers fired events in a unique way. In short:

chrome fired 2 keydowns, 1 paste, and 2 keyup events
firefox fired 2 keydowns, 1 paste, and 1 keyup event, and
webkit fired 2 keydowns, 1 keypress, 1 paste, and 1 keyup event

Excerpt from the codepen:

Google Chrome	80.0.3987.116 (Official Build) (64-bit):
KKpNXEX?editors=1000:61 keydown KeyboardEvent {isTrusted: true, key: "Meta", code: "MetaLeft", location: 1, ctrlKey: false, …}
KKpNXEX?editors=1000:61 keydown KeyboardEvent {isTrusted: true, key: "v", code: "KeyV", location: 0, ctrlKey: false, …}
KKpNXEX?editors=1000:61 paste ClipboardEvent {isTrusted: true, clipboardData: DataTransfer, type: "paste", target: input, currentTarget: input, …}
KKpNXEX?editors=1000:61 keyup KeyboardEvent {isTrusted: true, key: "Meta", code: "MetaLeft", location: 1, ctrlKey: false, …}
KKpNXEX?editors=1000:61 keyup KeyboardEvent {isTrusted: true, key: "v", code: "KeyV", location: 0, ctrlKey: false, …}

Firefox 74.0b6:
keydown Meta { target: input, key: "Meta", charCode: 0, keyCode: 224 }
keydown Meta { target: input, key: "v", charCode: 0, keyCode: 86 }
paste { target: input, clipboardData: DataTransfer }
keyup { target: input, key: "Meta", charCode: 0, keyCode: 224 }

Safari Technology Preview Release 101 (Safari 13.2, WebKit 14610.1.3.1):
[Log] keydown – KeyboardEvent {isTrusted: true, key: "Meta", code: "MetaLeft", …} (KKpNXEX, line 61)
[Log] keydown – KeyboardEvent {isTrusted: true, key: "v", code: "KeyV", …} (KKpNXEX, line 61)
[Log] keypress – KeyboardEvent {isTrusted: true, key: "v", code: "KeyV", …} (KKpNXEX, line 61)
[Log] paste – ClipboardEvent {isTrusted: true, clipboardData: DataTransfer, type: "paste", …} (KKpNXEX, line 61)
[Log] keyup – KeyboardEvent {isTrusted: true, key: "Meta", code: "MetaLeft", …} (KKpNXEX, line 61)

5. I asked Jake Archibald who I can talk to for standardizing this, and he said to file a bug with the spec, and here I am.

P.S. I'm not sure if there are more keyboard events that I missed. Consequently, I haven't tested those. For now, I feel that these events are enough to demonstrate the discrepancy between browsers, and we can investigate further should it be deemed that this is worth standardizing.

EDIT: Also, obviously there are commands other than (CMD + v) which could potentially trigger different events among browsers. Admittedly I haven't tested any yet.

MOVED TO: w3c/uievents#261