diff --git a/packages/react-dom/src/events/SyntheticKeyboardEvent.js b/packages/react-dom/src/events/SyntheticKeyboardEvent.js index ef1ceedebe64..f083d1b861c4 100644 --- a/packages/react-dom/src/events/SyntheticKeyboardEvent.js +++ b/packages/react-dom/src/events/SyntheticKeyboardEvent.js @@ -16,6 +16,7 @@ import getEventModifierState from './getEventModifierState'; */ const SyntheticKeyboardEvent = SyntheticUIEvent.extend({ key: getEventKey, + code: null, 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 index 06673f0fbe04..1e5149968778 100644 --- a/packages/react-dom/src/events/__tests__/SyntheticKeyboardEvent-test.js +++ b/packages/react-dom/src/events/__tests__/SyntheticKeyboardEvent-test.js @@ -451,6 +451,53 @@ describe('SyntheticKeyboardEvent', () => { }); }); }); + + describe('code', () => { + it('returns code on `keydown`, `keyup` and `keypress`', () => { + let codeDown = null; + let codeUp = null; + let codePress = null; + const node = ReactDOM.render( + { + 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', { + code: 'KeyQ', + charCode: 113, + bubbles: true, + cancelable: true, + }), + ); + expect(codeDown).toBe('KeyQ'); + expect(codeUp).toBe('KeyQ'); + expect(codePress).toBe('KeyQ'); + }); + }); }); describe('EventInterface', () => {