Add KeyboardEvent.code to synthetic event (#18287)
* Add KeyboardEvent.code to synthetic event * remove null to 0 transformation * make onKeyPress work
Nick Reiley committed
Apr 4, 2020 at 18:24 UTC
f625fce8578cc77113d9da8ffd02032a60477e6a
2 files changed
+48
packages/react-dom/src/events/SyntheticKeyboardEvent.js
+1
@@ -16,6 +16,7 @@ import getEventModifierState from './getEventModifierState';
16
*/
17
const SyntheticKeyboardEvent = SyntheticUIEvent.extend({
18
key: getEventKey,
19
+ code: null,
20
location: null,
21
ctrlKey: null,
22
shiftKey: null,
packages/react-dom/src/events/__tests__/SyntheticKeyboardEvent-test.js
+47
@@ -451,6 +451,53 @@ describe('SyntheticKeyboardEvent', () => {
451
});
452
});
453
});
454
+
455
+ describe('code', () => {
456
+ it('returns code on `keydown`, `keyup` and `keypress`', () => {
457
+ let codeDown = null;
458
+ let codeUp = null;
459
+ let codePress = null;
460
+ const node = ReactDOM.render(
461
+ <input
462
+ onKeyDown={e => {
463
+ codeDown = e.code;
464
+ }}
465
+ onKeyUp={e => {
466
+ codeUp = e.code;
467
+ }}
468
+ onKeyPress={e => {
469
+ codePress = e.code;
470
+ }}
471
+ />,
472
+ container,
473
+ );
474
+ node.dispatchEvent(
475
+ new KeyboardEvent('keydown', {
476
+ code: 'KeyQ',
477
+ bubbles: true,
478
+ cancelable: true,
479
+ }),
480
+ );
481
+ node.dispatchEvent(
482
+ new KeyboardEvent('keyup', {
483
+ code: 'KeyQ',
484
+ bubbles: true,
485
+ cancelable: true,
486
+ }),
487
+ );
488
+ node.dispatchEvent(
489
+ new KeyboardEvent('keypress', {
490
+ code: 'KeyQ',
491
+ charCode: 113,
492
+ bubbles: true,
493
+ cancelable: true,
494
+ }),
495
+ );
496
+ expect(codeDown).toBe('KeyQ');
497
+ expect(codeUp).toBe('KeyQ');
498
+ expect(codePress).toBe('KeyQ');
499
+ });
500
+ });
501
});
502
503
describe('EventInterface', () => {