From ee40b3f12cd05f83174495d53b43ab66a4b2a09e Mon Sep 17 00:00:00 2001 From: Nick Reiley Date: Thu, 12 Mar 2020 08:56:04 +0500 Subject: [PATCH 1/3] Add KeyboardEvent.code to synthetic event --- .../src/events/SyntheticKeyboardEvent.js | 6 +++ .../__tests__/SyntheticKeyboardEvent-test.js | 46 +++++++++++++++++++ 2 files changed, 52 insertions(+) diff --git a/packages/react-dom/src/events/SyntheticKeyboardEvent.js b/packages/react-dom/src/events/SyntheticKeyboardEvent.js index ef1ceedebe64..2db2dd179303 100644 --- 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 index 06673f0fbe04..9426e58baeb9 100644 --- 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( + { + 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', () => { From c4e3619145de04f96eed745de1c6c3114b339985 Mon Sep 17 00:00:00 2001 From: Nick Reiley Date: Thu, 2 Apr 2020 15:48:49 +0500 Subject: [PATCH 2/3] remove null to 0 transformation --- packages/react-dom/src/events/SyntheticKeyboardEvent.js | 7 +------ .../src/events/__tests__/SyntheticKeyboardEvent-test.js | 6 +++--- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/react-dom/src/events/SyntheticKeyboardEvent.js b/packages/react-dom/src/events/SyntheticKeyboardEvent.js index 2db2dd179303..f083d1b861c4 100644 --- a/packages/react-dom/src/events/SyntheticKeyboardEvent.js +++ b/packages/react-dom/src/events/SyntheticKeyboardEvent.js @@ -16,12 +16,7 @@ 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; - }, + 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 9426e58baeb9..2b56d6b3f3c8 100644 --- a/packages/react-dom/src/events/__tests__/SyntheticKeyboardEvent-test.js +++ b/packages/react-dom/src/events/__tests__/SyntheticKeyboardEvent-test.js @@ -453,7 +453,7 @@ describe('SyntheticKeyboardEvent', () => { }); describe('code', () => { - it('returns code on `keydown`, `keyup` and 0 on `keypress`', () => { + it('returns code on `keydown`, `keyup` and null on `keypress`', () => { let codeDown = null; let codeUp = null; let codePress = null; @@ -487,14 +487,14 @@ describe('SyntheticKeyboardEvent', () => { ); node.dispatchEvent( new KeyboardEvent('keypress', { - charCode: 81, + code: 'KeyQ', bubbles: true, cancelable: true, }), ); expect(codeDown).toBe('KeyQ'); expect(codeUp).toBe('KeyQ'); - expect(codePress).toBe(0); + expect(codePress).toBe(null); }); }); }); From 223785a0e12d5c5fc69817c8efb09737bc8d4669 Mon Sep 17 00:00:00 2001 From: Nick Reiley Date: Sat, 4 Apr 2020 15:56:04 +0500 Subject: [PATCH 3/3] make onKeyPress work --- .../src/events/__tests__/SyntheticKeyboardEvent-test.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react-dom/src/events/__tests__/SyntheticKeyboardEvent-test.js b/packages/react-dom/src/events/__tests__/SyntheticKeyboardEvent-test.js index 2b56d6b3f3c8..1e5149968778 100644 --- a/packages/react-dom/src/events/__tests__/SyntheticKeyboardEvent-test.js +++ b/packages/react-dom/src/events/__tests__/SyntheticKeyboardEvent-test.js @@ -453,7 +453,7 @@ describe('SyntheticKeyboardEvent', () => { }); describe('code', () => { - it('returns code on `keydown`, `keyup` and null on `keypress`', () => { + it('returns code on `keydown`, `keyup` and `keypress`', () => { let codeDown = null; let codeUp = null; let codePress = null; @@ -488,13 +488,14 @@ describe('SyntheticKeyboardEvent', () => { node.dispatchEvent( new KeyboardEvent('keypress', { code: 'KeyQ', + charCode: 113, bubbles: true, cancelable: true, }), ); expect(codeDown).toBe('KeyQ'); expect(codeUp).toBe('KeyQ'); - expect(codePress).toBe(null); + expect(codePress).toBe('KeyQ'); }); }); });