Add KeyboardEvent.code to synthetic event

Author: bl00mber

packages/react-dom/src/events/SyntheticKeyboardEvent.js

@@ -16,6 +16,12 @@ import getEventModifierState from './getEventModifierState';
  */
 const SyntheticKeyboardEvent = SyntheticUIEvent.extend({
  key: getEventKey,
+ code: function(event) {
+ if (event.type === 'keydown' || event.type === 'keyup') {
+ return event.code;
+ }
+ return 0;
+ },
  location: null,
  ctrlKey: null,
  shiftKey: null,

packages/react-dom/src/events/__tests__/SyntheticKeyboardEvent-test.js

@@ -451,6 +451,52 @@ describe('SyntheticKeyboardEvent', () => {
  });
  });
  });
+
+ describe('code', () => {
+ it('returns code on `keydown`, `keyup` and 0 on `keypress`', () => {
+ let codeDown = null;
+ let codeUp = null;
+ let codePress = null;
+ const node = ReactDOM.render(
+ <input
+ onKeyDown={e => {
+ codeDown = e.code;
+ }}
+ onKeyUp={e => {
+ codeUp = e.code;
+ }}
+ onKeyPress={e => {
+ codePress = e.code;
+ }}
+ />,
+ container,
+ );
+ node.dispatchEvent(
+ new KeyboardEvent('keydown', {
+ code: 'KeyQ',
+ bubbles: true,
+ cancelable: true,
+ }),
+ );
+ node.dispatchEvent(
+ new KeyboardEvent('keyup', {
+ code: 'KeyQ',
+ bubbles: true,
+ cancelable: true,
+ }),
+ );
+ node.dispatchEvent(
+ new KeyboardEvent('keypress', {
+ charCode: 81,
+ bubbles: true,
+ cancelable: true,
+ }),
+ );
+ expect(codeDown).toBe('KeyQ');
+ expect(codeUp).toBe('KeyQ');
+ expect(codePress).toBe(0);
+ });
+ });
  });
 
  describe('EventInterface', () => {

packages/react-interactions/events/src/dom/Keyboard.js

@@ -38,7 +38,7 @@ export type KeyboardEvent = {|
  ctrlKey: boolean,
  defaultPrevented: boolean,
  isComposing?: boolean,
- key?: string,
+ code?: string,
  metaKey: boolean,
  pointerType: 'keyboard',
  shiftKey: boolean,