From 91a044e31fc79e4ea6db97f97de4a9e3a5da8a43 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Fri, 10 May 2019 13:32:11 +0100 Subject: [PATCH] Event API: add key modifiers to Press events (#15611) --- packages/react-events/src/Press.js | 32 +++++++++++++++++-- .../src/__tests__/Press-test.internal.js | 23 +++++++++++++ 2 files changed, 53 insertions(+), 2 deletions(-) diff --git a/packages/react-events/src/Press.js b/packages/react-events/src/Press.js index 5da2ee049d..d67296bc6b 100644 --- a/packages/react-events/src/Press.js +++ b/packages/react-events/src/Press.js @@ -91,6 +91,12 @@ type PressEvent = {| pageY: null | number, screenX: null | number, screenY: null | number, + x: null | number, + y: null | number, + altKey: boolean, + ctrlKey: boolean, + metaKey: boolean, + shiftKey: boolean, |}; const DEFAULT_PRESS_END_DELAY_MS = 0; @@ -148,9 +154,14 @@ function createPressEvent( let pageY = null; let screenX = null; let screenY = null; + let altKey = false; + let ctrlKey = false; + let metaKey = false; + let shiftKey = false; if (event) { const nativeEvent = (event.nativeEvent: any); + ({altKey, ctrlKey, metaKey, shiftKey} = nativeEvent); // Only check for one property, checking for all of them is costly. We can assume // if clientX exists, so do the rest. let eventObject; @@ -174,6 +185,12 @@ function createPressEvent( pageY, screenX, screenY, + x: clientX, + y: clientY, + altKey, + ctrlKey, + metaKey, + shiftKey, }; } @@ -657,10 +674,21 @@ const PressResponder = { case 'click': { if (isAnchorTagElement(target)) { - const {ctrlKey, metaKey, shiftKey} = (nativeEvent: MouseEvent); + const { + altKey, + ctrlKey, + metaKey, + shiftKey, + } = (nativeEvent: MouseEvent); // Check "open in new window/tab" and "open context menu" key modifiers const preventDefault = props.preventDefault; - if (preventDefault !== false && !shiftKey && !metaKey && !ctrlKey) { + if ( + preventDefault !== false && + !shiftKey && + !metaKey && + !ctrlKey && + !altKey + ) { nativeEvent.preventDefault(); } } diff --git a/packages/react-events/src/__tests__/Press-test.internal.js b/packages/react-events/src/__tests__/Press-test.internal.js index 5f12041bf4..7ebbfccb65 100644 --- a/packages/react-events/src/__tests__/Press-test.internal.js +++ b/packages/react-events/src/__tests__/Press-test.internal.js @@ -307,6 +307,29 @@ describe('Event responder: Press', () => { expect(onPressEnd).not.toBeCalled(); }); + it('is called with keyboard modifiers', () => { + ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'Enter'})); + ref.current.dispatchEvent( + createKeyboardEvent('keyup', { + key: 'Enter', + metaKey: true, + ctrlKey: true, + altKey: true, + shiftKey: true, + }), + ); + expect(onPressEnd).toHaveBeenCalledWith( + expect.objectContaining({ + pointerType: 'keyboard', + type: 'pressend', + metaKey: true, + ctrlKey: true, + altKey: true, + shiftKey: true, + }), + ); + }); + // No PointerEvent fallbacks it('is called after "mouseup" event', () => { ref.current.dispatchEvent(createEvent('mousedown'));