Event API: add key modifiers to Press events (#15611)
Dominic Gannaway committed
May 10, 2019 at 13:32 UTC
91a044e31fc79e4ea6db97f97de4a9e3a5da8a43
2 files changed
+53
-2
packages/react-events/src/Press.js
+30
-2
@@ -91,6 +91,12 @@ type PressEvent = {|
91
pageY: null | number,
92
screenX: null | number,
93
screenY: null | number,
94
+ x: null | number,
95
+ y: null | number,
96
+ altKey: boolean,
97
+ ctrlKey: boolean,
98
+ metaKey: boolean,
99
+ shiftKey: boolean,
100
|};
101
102
const DEFAULT_PRESS_END_DELAY_MS = 0;
@@ -148,9 +154,14 @@ function createPressEvent(
154
let pageY = null;
155
let screenX = null;
156
let screenY = null;
157
+ let altKey = false;
158
+ let ctrlKey = false;
159
+ let metaKey = false;
160
+ let shiftKey = false;
161
162
if (event) {
163
const nativeEvent = (event.nativeEvent: any);
164
+ ({altKey, ctrlKey, metaKey, shiftKey} = nativeEvent);
165
// Only check for one property, checking for all of them is costly. We can assume
166
// if clientX exists, so do the rest.
167
let eventObject;
@@ -174,6 +185,12 @@ function createPressEvent(
185
pageY,
186
screenX,
187
screenY,
188
+ x: clientX,
189
+ y: clientY,
190
+ altKey,
191
+ ctrlKey,
192
+ metaKey,
193
+ shiftKey,
194
};
195
}
196
@@ -657,10 +674,21 @@ const PressResponder = {
674
675
case 'click': {
676
if (isAnchorTagElement(target)) {
660
- const {ctrlKey, metaKey, shiftKey} = (nativeEvent: MouseEvent);
677
+ const {
678
+ altKey,
679
+ ctrlKey,
680
+ metaKey,
681
+ shiftKey,
682
+ } = (nativeEvent: MouseEvent);
683
// Check "open in new window/tab" and "open context menu" key modifiers
684
const preventDefault = props.preventDefault;
663
- if (preventDefault !== false && !shiftKey && !metaKey && !ctrlKey) {
685
+ if (
686
+ preventDefault !== false &&
687
+ !shiftKey &&
688
+ !metaKey &&
689
+ !ctrlKey &&
690
+ !altKey
691
+ ) {
692
nativeEvent.preventDefault();
693
}
694
}
packages/react-events/src/__tests__/Press-test.internal.js
+23
@@ -307,6 +307,29 @@ describe('Event responder: Press', () => {
307
expect(onPressEnd).not.toBeCalled();
308
});
309
310
+ it('is called with keyboard modifiers', () => {
311
+ ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'Enter'}));
312
+ ref.current.dispatchEvent(
313
+ createKeyboardEvent('keyup', {
314
+ key: 'Enter',
315
+ metaKey: true,
316
+ ctrlKey: true,
317
+ altKey: true,
318
+ shiftKey: true,
319
+ }),
320
+ );
321
+ expect(onPressEnd).toHaveBeenCalledWith(
322
+ expect.objectContaining({
323
+ pointerType: 'keyboard',
324
+ type: 'pressend',
325
+ metaKey: true,
326
+ ctrlKey: true,
327
+ altKey: true,
328
+ shiftKey: true,
329
+ }),
330
+ );
331
+ });
332
+
333
// No PointerEvent fallbacks
334
it('is called after "mouseup" event', () => {
335
ref.current.dispatchEvent(createEvent('mousedown'));