Add KeyboardEvent.code to synthetic event

facebook · Mar 14, 2020 · 3cc717e · 3cc717e
1 parent 8b155d2
commit 3cc717e
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 0 deletions.
diff --git a/packages/react-dom/src/events/SyntheticKeyboardEvent.js b/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,

diff --git a/packages/react-dom/src/events/__tests__/SyntheticKeyboardEvent-test.js b/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', () => {

diff --git a/packages/react-interactions/events/src/dom/Keyboard.js b/packages/react-interactions/events/src/dom/Keyboard.js
@@ -39,6 +39,7 @@ export type KeyboardEvent = {|
   defaultPrevented: boolean,
   isComposing?: boolean,
   key?: string,
+  code?: string,
   metaKey: boolean,
   pointerType: 'keyboard',
   shiftKey: boolean,