[react-events] Rely on 'buttons' rather than 'button' (#16479)
The semantics of 'button' on events differs between PointerEvent and MouseEvent, whereas they are the same for 'buttons'. Furthermore, 'buttons' allows developers to determine when multiple buttons are pressed as the same time. https://w3c.github.io/pointerevents/#the-button-property
Nicolas Gallagher committed
Aug 21, 2019 at 10:07 UTC
2559111c21a4bb18ab6ade5e464cb42863e9e8b3
11 files changed
+205
-123
packages/react-dom/src/events/DOMEventResponderSystem.js
+2
-2
@@ -445,7 +445,7 @@ function createDOMResponderEvent(
445
passive: boolean,
446
passiveSupported: boolean,
447
): ReactDOMResponderEvent {
448
- const {pointerType} = (nativeEvent: any);
448
+ const {buttons, pointerType} = (nativeEvent: any);
449
let eventPointerType = '';
450
let pointerId = null;
451
@@ -454,7 +454,7 @@ function createDOMResponderEvent(
454
pointerId = (nativeEvent: any).pointerId;
455
} else if (nativeEvent.key !== undefined) {
456
eventPointerType = 'keyboard';
457
- } else if (nativeEvent.button !== undefined) {
457
+ } else if (buttons !== undefined) {
458
eventPointerType = 'mouse';
459
} else if ((nativeEvent: any).changedTouches !== undefined) {
460
eventPointerType = 'touch';
packages/react-events/docs/Press.md
-10
@@ -78,11 +78,6 @@ type PressOffset = {
78
79
Disables all `Press` events.
80
81
-### onContextMenu: (e: PressEvent) => void
82
-
83
-Called when the context menu is shown. When a press is active, the context menu
84
-will only be shown (and the press cancelled) if `preventDefault` is `false`.
85
-
81
### onPress: (e: PressEvent) => void
82
83
Called immediately after a press is released, unless the press is released
@@ -115,11 +110,6 @@ down) can be moved back within the bounds of the element to reactivate it.
110
Ensure you pass in a constant to reduce memory allocations. Default is `20` for
111
each offset.
112
118
-### preventContextMenu: boolean = false
119
-
120
-Prevents the native context menu from being shown, but `onContextMenu`
121
-is still called.
122
-
113
### preventDefault: boolean = true
114
115
Whether to `preventDefault()` native events. Native behavior is prevented by
packages/react-events/src/dom/ContextMenu.js
+15
-16
@@ -28,20 +28,19 @@ type ContextMenuState = {
28
};
29
30
type ContextMenuEvent = {|
31
- target: Element | Document,
32
- type: 'contextmenu',
33
- pointerType: PointerType,
34
- timeStamp: number,
35
- clientX: null | number,
36
- clientY: null | number,
37
- pageX: null | number,
38
- pageY: null | number,
39
- x: null | number,
40
- y: null | number,
31
altKey: boolean,
32
+ buttons: 0 | 1 | 2,
33
ctrlKey: boolean,
34
metaKey: boolean,
35
+ pageX: null | number,
36
+ pageY: null | number,
37
+ pointerType: PointerType,
38
shiftKey: boolean,
39
+ target: Element | Document,
40
+ timeStamp: number,
41
+ type: 'contextmenu',
42
+ x: null | number,
43
+ y: null | number,
44
|};
45
46
const hasPointerEvents =
@@ -60,13 +59,13 @@ function dispatchContextMenuEvent(
59
60
const gestureState = {
61
altKey: nativeEvent.altKey,
63
- button: nativeEvent.button === 0 ? 'primary' : 'auxillary',
64
- ctrlKey: nativeEvent.altKey,
65
- metaKey: nativeEvent.altKey,
66
- pageX: nativeEvent.altKey,
67
- pageY: nativeEvent.altKey,
62
+ buttons: nativeEvent.buttons != null ? nativeEvent.buttons : 0,
63
+ ctrlKey: nativeEvent.ctrlKey,
64
+ metaKey: nativeEvent.metaKey,
65
+ pageX: nativeEvent.pageX,
66
+ pageY: nativeEvent.pageY,
67
pointerType,
69
- shiftKey: nativeEvent.altKey,
68
+ shiftKey: nativeEvent.shiftKey,
69
target,
70
timeStamp,
71
type: 'contextmenu',
packages/react-events/src/dom/Hover.js
+4
-4
@@ -37,16 +37,16 @@ type HoverState = {
37
type HoverEventType = 'hoverstart' | 'hoverend' | 'hoverchange' | 'hovermove';
38
39
type HoverEvent = {|
40
- pointerType: PointerType,
41
- target: Element | Document,
42
- type: HoverEventType,
43
- timeStamp: number,
40
clientX: null | number,
41
clientY: null | number,
42
pageX: null | number,
43
pageY: null | number,
44
+ pointerType: PointerType,
45
screenX: null | number,
46
screenY: null | number,
47
+ target: Element | Document,
48
+ timeStamp: number,
49
+ type: HoverEventType,
50
x: null | number,
51
y: null | number,
52
|};
packages/react-events/src/dom/Press.js
+36
-30
@@ -75,24 +75,24 @@ type PressEventType =
75
| 'presschange';
76
77
type PressEvent = {|
78
- button: 'primary' | 'auxillary',
79
- defaultPrevented: boolean,
80
- target: Element | Document,
81
- type: PressEventType,
82
- pointerType: PointerType,
83
- timeStamp: number,
78
+ altKey: boolean,
79
+ buttons: 0 | 1 | 4,
80
clientX: null | number,
81
clientY: null | number,
82
+ ctrlKey: boolean,
83
+ defaultPrevented: boolean,
84
+ metaKey: boolean,
85
pageX: null | number,
86
pageY: null | number,
87
+ pointerType: PointerType,
88
screenX: null | number,
89
screenY: null | number,
90
+ shiftKey: boolean,
91
+ target: Element | Document,
92
+ timeStamp: number,
93
+ type: PressEventType,
94
x: null | number,
95
y: null | number,
92
- altKey: boolean,
93
- ctrlKey: boolean,
94
- metaKey: boolean,
95
- shiftKey: boolean,
96
|};
97
98
const hasPointerEvents =
@@ -151,7 +151,7 @@ function createPressEvent(
151
defaultPrevented: boolean,
152
): PressEvent {
153
const timeStamp = context.getTimeStamp();
154
- let button = 'primary';
154
+ let buttons = 1;
155
let clientX = null;
156
let clientY = null;
157
let pageX = null;
@@ -171,31 +171,36 @@ function createPressEvent(
171
let eventObject;
172
eventObject = (touchEvent: any) || (nativeEvent: any);
173
if (eventObject) {
174
- ({clientX, clientY, pageX, pageY, screenX, screenY} = eventObject);
175
- }
176
- if (nativeEvent.button === 1) {
177
- button = 'auxillary';
174
+ ({
175
+ buttons,
176
+ clientX,
177
+ clientY,
178
+ pageX,
179
+ pageY,
180
+ screenX,
181
+ screenY,
182
+ } = eventObject);
183
}
184
}
185
return {
181
- button,
182
- defaultPrevented,
183
- target,
184
- type,
185
- pointerType,
186
- timeStamp,
186
+ altKey,
187
+ buttons,
188
clientX,
189
clientY,
190
+ ctrlKey,
191
+ defaultPrevented,
192
+ metaKey,
193
pageX,
194
pageY,
195
+ pointerType,
196
screenX,
197
screenY,
198
+ shiftKey,
199
+ target,
200
+ timeStamp,
201
+ type,
202
x: clientX,
203
y: clientY,
195
- altKey,
196
- ctrlKey,
197
- metaKey,
198
- shiftKey,
204
};
205
}
206
@@ -581,11 +586,12 @@ const pressResponderImpl = {
586
state.activePointerId = touchEvent.identifier;
587
}
588
584
- // Ignore any device buttons except primary/auxillary and touch/pen contact.
589
+ // Ignore any device buttons except primary/secondary and touch/pen contact.
590
// Additionally we ignore primary-button + ctrl-key with Macs as that
591
// acts like right-click and opens the contextmenu.
592
if (
588
- nativeEvent.button > 1 ||
593
+ nativeEvent.buttons === 2 ||
594
+ nativeEvent.buttons > 4 ||
595
(isMac && isMouseEvent && nativeEvent.ctrlKey)
596
) {
597
return;
@@ -703,7 +709,7 @@ const pressResponderImpl = {
709
case 'mouseup':
710
case 'touchend': {
711
if (isPressed) {
706
- const button = nativeEvent.button;
712
+ const buttons = nativeEvent.buttons;
713
let isKeyboardEvent = false;
714
let touchEvent;
715
if (type === 'pointerup' && activePointerId !== pointerId) {
@@ -722,7 +728,7 @@ const pressResponderImpl = {
728
}
729
isKeyboardEvent = true;
730
removeRootEventTypes(context, state);
725
- } else if (button === 1) {
731
+ } else if (buttons === 4) {
732
// Remove the root events here as no 'click' event is dispatched when this 'button' is pressed.
733
removeRootEventTypes(context, state);
734
}
@@ -780,7 +786,7 @@ const pressResponderImpl = {
786
}
787
}
788
783
- if (state.isPressWithinResponderRegion && button !== 1) {
789
+ if (state.isPressWithinResponderRegion && buttons !== 4) {
790
dispatchEvent(
791
event,
792
onPress,
packages/react-events/src/dom/__tests__/ContextMenu-test.internal.js
+21
-4
@@ -9,7 +9,12 @@
9
10
'use strict';
11
12
-import {createEventTarget, platform, setPointerEvent} from '../testing-library';
12
+import {
13
+ buttonsType,
14
+ createEventTarget,
15
+ platform,
16
+ setPointerEvent,
17
+} from '../testing-library';
18
19
let React;
20
let ReactFeatureFlags;
@@ -61,7 +66,11 @@ describe.each(table)('ContextMenu responder', hasPointerEvents => {
66
expect(preventDefault).toHaveBeenCalledTimes(1);
67
expect(onContextMenu).toHaveBeenCalledTimes(1);
68
expect(onContextMenu).toHaveBeenCalledWith(
64
- expect.objectContaining({pointerType: 'mouse', type: 'contextmenu'}),
69
+ expect.objectContaining({
70
+ buttons: buttonsType.secondary,
71
+ pointerType: 'mouse',
72
+ type: 'contextmenu',
73
+ }),
74
);
75
});
76
@@ -80,7 +89,11 @@ describe.each(table)('ContextMenu responder', hasPointerEvents => {
89
expect(preventDefault).toHaveBeenCalledTimes(1);
90
expect(onContextMenu).toHaveBeenCalledTimes(1);
91
expect(onContextMenu).toHaveBeenCalledWith(
83
- expect.objectContaining({pointerType: 'touch', type: 'contextmenu'}),
92
+ expect.objectContaining({
93
+ buttons: buttonsType.none,
94
+ pointerType: 'touch',
95
+ type: 'contextmenu',
96
+ }),
97
);
98
});
99
@@ -144,7 +157,11 @@ describe.each(table)('ContextMenu responder', hasPointerEvents => {
157
target.contextmenu({}, {modified: true});
158
expect(onContextMenu).toHaveBeenCalledTimes(1);
159
expect(onContextMenu).toHaveBeenCalledWith(
147
- expect.objectContaining({pointerType: 'mouse', type: 'contextmenu'}),
160
+ expect.objectContaining({
161
+ buttons: buttonsType.primary,
162
+ pointerType: 'mouse',
163
+ type: 'contextmenu',
164
+ }),
165
);
166
});
167
});
packages/react-events/src/dom/__tests__/Press-test.internal.js
+29
-20
@@ -9,7 +9,11 @@
9
10
'use strict';
11
12
-import {createEventTarget, setPointerEvent} from '../testing-library';
12
+import {
13
+ buttonsType,
14
+ createEventTarget,
15
+ setPointerEvent,
16
+} from '../testing-library';
17
18
let React;
19
let ReactFeatureFlags;
@@ -114,36 +118,36 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
118
},
119
);
120
117
- it('is called after auxillary-button pointer down', () => {
121
+ it('is called after middle-button pointer down', () => {
122
const target = createEventTarget(ref.current);
119
- target.pointerdown({button: 1, pointerType: 'mouse'});
123
+ target.pointerdown({buttons: buttonsType.middle, pointerType: 'mouse'});
124
expect(onPressStart).toHaveBeenCalledTimes(1);
125
expect(onPressStart).toHaveBeenCalledWith(
126
expect.objectContaining({
123
- button: 'auxillary',
127
+ buttons: buttonsType.middle,
128
pointerType: 'mouse',
129
type: 'pressstart',
130
}),
131
);
132
});
133
130
- it('is not called after pointer move following auxillary-button press', () => {
134
+ it('is not called after pointer move following middle-button press', () => {
135
const node = ref.current;
136
const target = createEventTarget(node);
137
target.setBoundingClientRect({x: 0, y: 0, width: 100, height: 100});
134
- target.pointerdown({button: 1, pointerType: 'mouse'});
135
- target.pointerup({button: 1, pointerType: 'mouse'});
138
+ target.pointerdown({buttons: buttonsType.middle, pointerType: 'mouse'});
139
+ target.pointerup({buttons: buttonsType.middle, pointerType: 'mouse'});
140
target.pointerhover({x: 110, y: 110});
141
target.pointerhover({x: 50, y: 50});
142
expect(onPressStart).toHaveBeenCalledTimes(1);
143
});
144
141
- it('ignores any events not caused by primary/auxillary-click or touch/pen contact', () => {
145
+ it('ignores any events not caused by primary/middle-click or touch/pen contact', () => {
146
const target = createEventTarget(ref.current);
143
- target.pointerdown({button: 2});
144
- target.pointerup({button: 2});
145
- target.pointerdown({button: 5});
146
- target.pointerup({button: 5});
147
+ target.pointerdown({buttons: buttonsType.secondary});
148
+ target.pointerup({buttons: buttonsType.secondary});
149
+ target.pointerdown({buttons: buttonsType.eraser});
150
+ target.pointerup({buttons: buttonsType.eraser});
151
expect(onPressStart).toHaveBeenCalledTimes(0);
152
});
153
@@ -209,14 +213,14 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
213
},
214
);
215
212
- it('is called after auxillary-button pointer up', () => {
216
+ it('is called after middle-button pointer up', () => {
217
const target = createEventTarget(ref.current);
214
- target.pointerdown({button: 1, pointerType: 'mouse'});
215
- target.pointerup({button: 1, pointerType: 'mouse'});
218
+ target.pointerdown({buttons: buttonsType.middle, pointerType: 'mouse'});
219
+ target.pointerup({buttons: buttonsType.middle, pointerType: 'mouse'});
220
expect(onPressEnd).toHaveBeenCalledTimes(1);
221
expect(onPressEnd).toHaveBeenCalledWith(
222
expect.objectContaining({
219
- button: 'auxillary',
223
+ buttons: buttonsType.middle,
224
pointerType: 'mouse',
225
type: 'pressend',
226
}),
@@ -350,10 +354,10 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
354
},
355
);
356
353
- it('is not called after auxillary-button press', () => {
357
+ it('is not called after middle-button press', () => {
358
const target = createEventTarget(ref.current);
355
- target.pointerdown({button: 1, pointerType: 'mouse'});
356
- target.pointerup({button: 1, pointerType: 'mouse'});
359
+ target.pointerdown({buttons: buttonsType.middle, pointerType: 'mouse'});
360
+ target.pointerup({buttons: buttonsType.middle, pointerType: 'mouse'});
361
expect(onPress).not.toHaveBeenCalled();
362
});
363
@@ -460,7 +464,12 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
464
const target = createEventTarget(ref.current);
465
target.setBoundingClientRect({x: 0, y: 0, width: 100, height: 100});
466
target.keydown({key: 'Enter'});
463
- target.pointermove({button: -1, pointerType: 'mouse', x: 10, y: 10});
467
+ target.pointermove({
468
+ buttons: buttonsType.none,
469
+ pointerType: 'mouse',
470
+ x: 10,
471
+ y: 10,
472
+ });
473
expect(onPressMove).not.toBeCalled();
474
});
475
});
packages/react-events/src/dom/testing-library/domEnvironment.js
+24
@@ -8,6 +8,7 @@
8
*/
9
10
'use strict';
11
+
12
/**
13
* Change environment support for PointerEvent.
14
*/
@@ -49,3 +50,26 @@ export const platform = {
50
}
51
},
52
};
53
+
54
+/**
55
+ * Buttons bitmask
56
+ */
57
+
58
+export const buttonsType = {
59
+ none: 0,
60
+ // left-mouse
61
+ // touch contact
62
+ // pen contact
63
+ primary: 1,
64
+ // right-mouse
65
+ // pen barrel button
66
+ secondary: 2,
67
+ // middle mouse
68
+ middle: 4,
69
+ // back mouse
70
+ back: 8,
71
+ // forward mouse
72
+ forward: 16,
73
+ // pen eraser
74
+ eraser: 32,
75
+};
packages/react-events/src/dom/testing-library/domEventSequences.js
+17
-14
@@ -10,7 +10,7 @@
10
'use strict';
11
12
import * as domEvents from './domEvents';
13
-import {hasPointerEvent, platform} from './domEnvironment';
13
+import {buttonsType, hasPointerEvent, platform} from './domEnvironment';
14
15
function emptyFunction() {}
16
@@ -29,30 +29,33 @@ export function contextmenu(
29
) {
30
const dispatch = arg => target.dispatchEvent(arg);
31
if (pointerType === 'touch') {
32
- const button = 0;
32
if (hasPointerEvent()) {
34
- dispatch(domEvents.pointerdown({button, pointerType}));
33
+ dispatch(
34
+ domEvents.pointerdown({buttons: buttonsType.primary, pointerType}),
35
+ );
36
}
37
dispatch(domEvents.touchstart());
37
- dispatch(domEvents.contextmenu({button, preventDefault}));
38
+ dispatch(
39
+ domEvents.contextmenu({buttons: buttonsType.none, preventDefault}),
40
+ );
41
} else if (pointerType === 'mouse') {
42
if (modified === true) {
40
- const button = 0;
43
+ const buttons = buttonsType.primary;
44
const ctrlKey = true;
45
if (hasPointerEvent()) {
43
- dispatch(domEvents.pointerdown({button, ctrlKey, pointerType}));
46
+ dispatch(domEvents.pointerdown({buttons, ctrlKey, pointerType}));
47
}
45
- dispatch(domEvents.mousedown({button, ctrlKey}));
48
+ dispatch(domEvents.mousedown({buttons, ctrlKey}));
49
if (platform.get() === 'mac') {
47
- dispatch(domEvents.contextmenu({button, ctrlKey, preventDefault}));
50
+ dispatch(domEvents.contextmenu({buttons, ctrlKey, preventDefault}));
51
}
52
} else {
50
- const button = 2;
53
+ const buttons = buttonsType.secondary;
54
if (hasPointerEvent()) {
52
- dispatch(domEvents.pointerdown({button, pointerType}));
55
+ dispatch(domEvents.pointerdown({buttons, pointerType}));
56
}
54
- dispatch(domEvents.mousedown({button}));
55
- dispatch(domEvents.contextmenu({button, preventDefault}));
57
+ dispatch(domEvents.mousedown({buttons}));
58
+ dispatch(domEvents.contextmenu({buttons, preventDefault}));
59
}
60
}
61
}
@@ -74,7 +77,7 @@ export function pointercancel(target, payload) {
77
export function pointerdown(target, defaultPayload) {
78
const dispatch = arg => target.dispatchEvent(arg);
79
const pointerType = getPointerType(defaultPayload);
77
- const payload = {button: 0, buttons: 2, ...defaultPayload};
80
+ const payload = {buttons: buttonsType.primary, ...defaultPayload};
81
82
if (pointerType === 'mouse') {
83
if (hasPointerEvent()) {
@@ -147,7 +150,7 @@ export function pointermove(target, payload) {
150
export function pointerup(target, defaultPayload) {
151
const dispatch = arg => target.dispatchEvent(arg);
152
const pointerType = getPointerType(defaultPayload);
150
- const payload = {button: 0, buttons: 2, ...defaultPayload};
153
+ const payload = {buttons: buttonsType.none, ...defaultPayload};
154
155
if (pointerType === 'mouse') {
156
if (hasPointerEvent()) {
packages/react-events/src/dom/testing-library/domEvents.js
+44
-21
@@ -9,6 +9,8 @@
9
10
'use strict';
11
12
+import {buttonsType} from './domEnvironment';
13
+
14
/**
15
* Native event object mocks for higher-level events.
16
*
@@ -24,6 +26,9 @@
26
* 3. PointerEvent and TouchEvent fields are normalized (e.g., 'rotationAngle' -> 'twist')
27
*/
28
29
+const defaultPointerSize = 23;
30
+const defaultBrowserChromeSize = 50;
31
+
32
function emptyFunction() {}
33
34
function createEvent(type, data = {}) {
@@ -57,8 +62,7 @@ function createPointerEvent(
62
type,
63
{
64
altKey = false,
60
- button = -1,
61
- buttons = 0,
65
+ buttons = buttonsType.none,
66
ctrlKey = false,
67
height,
68
metaKey = false,
@@ -86,7 +90,6 @@ function createPointerEvent(
90
91
return createEvent(type, {
92
altKey,
89
- button,
93
buttons,
94
clientX: x,
95
clientY: y,
@@ -94,7 +97,12 @@ function createPointerEvent(
97
getModifierState(keyArg) {
98
createGetModifierState(keyArg, modifierState);
99
},
97
- height: pointerType === 'mouse' ? 1 : height != null ? height : 11.5,
100
+ height:
101
+ pointerType === 'mouse'
102
+ ? 1
103
+ : height != null
104
+ ? height
105
+ : defaultPointerSize,
106
metaKey,
107
movementX,
108
movementY,
@@ -107,13 +115,14 @@ function createPointerEvent(
115
pressure,
116
preventDefault,
117
screenX: x,
110
- screenY: y + 50, // arbitrary value to emulate browser chrome, etc
118
+ screenY: y + defaultBrowserChromeSize,
119
shiftKey,
120
tangentialPressure,
121
tiltX,
122
tiltY,
123
twist,
116
- width: pointerType === 'mouse' ? 1 : width != null ? width : 11.5,
124
+ width:
125
+ pointerType === 'mouse' ? 1 : width != null ? width : defaultPointerSize,
126
});
127
}
128
@@ -147,8 +156,7 @@ function createMouseEvent(
156
type,
157
{
158
altKey = false,
150
- button = -1,
151
- buttons = 0,
159
+ buttons = buttonsType.none,
160
ctrlKey = false,
161
metaKey = false,
162
movementX = 0,
@@ -167,7 +175,6 @@ function createMouseEvent(
175
176
return createEvent(type, {
177
altKey,
170
- button,
178
buttons,
179
clientX: x,
180
clientY: y,
@@ -184,7 +191,7 @@ function createMouseEvent(
191
pageY: pageY || y,
192
preventDefault,
193
screenX: x,
187
- screenY: y + 50, // arbitrary value to emulate browser chrome, etc
194
+ screenY: y + defaultBrowserChromeSize,
195
shiftKey,
196
});
197
}
@@ -194,7 +201,7 @@ function createTouchEvent(
201
{
202
altKey = false,
203
ctrlKey = false,
197
- height = 11.5,
204
+ height = defaultPointerSize,
205
metaKey = false,
206
pageX,
207
pageY,
@@ -202,7 +209,7 @@ function createTouchEvent(
209
preventDefault = emptyFunction,
210
shiftKey = false,
211
twist = 0,
205
- width = 11.5,
212
+ width = defaultPointerSize,
213
x = 0,
214
y = 0,
215
} = {},
@@ -214,13 +221,15 @@ function createTouchEvent(
221
identifier: pointerId,
222
pageX: pageX || x,
223
pageY: pageY || y,
217
- radiusX: width,
218
- radiusY: height,
224
+ radiusX: width / 2,
225
+ radiusY: height / 2,
226
rotationAngle: twist,
227
screenX: x,
221
- screenY: y + 50, // arbitrary value to emulate browser chrome, etc
228
+ screenY: y + defaultBrowserChromeSize,
229
};
230
231
+ const activeTouch = type !== 'touchend' ? [touch] : null;
232
+
233
return createEvent(type, {
234
altKey,
235
changedTouches: [touch],
@@ -228,8 +237,8 @@ function createTouchEvent(
237
metaKey,
238
preventDefault,
239
shiftKey,
231
- targetTouches: type !== 'touchend' ? [touch] : null,
232
- touches: [touch],
240
+ targetTouches: activeTouch,
241
+ touches: activeTouch,
242
});
243
}
244
@@ -290,7 +299,12 @@ export function pointercancel(payload) {
299
}
300
301
export function pointerdown(payload) {
293
- return createPointerEvent('pointerdown', {button: 0, buttons: 2, ...payload});
302
+ const isTouch = payload != null && payload.pointerType === 'mouse';
303
+ return createPointerEvent('pointerdown', {
304
+ buttons: buttonsType.primary,
305
+ pressure: isTouch ? 1 : 0.5,
306
+ ...payload,
307
+ });
308
}
309
310
export function pointerenter(payload) {
@@ -314,7 +328,10 @@ export function pointerover(payload) {
328
}
329
330
export function pointerup(payload) {
317
- return createPointerEvent('pointerup', {button: 0, buttons: 2, ...payload});
331
+ return createPointerEvent('pointerup', {
332
+ buttons: buttonsType.none,
333
+ ...payload,
334
+ });
335
}
336
337
/**
@@ -322,7 +339,10 @@ export function pointerup(payload) {
339
*/
340
341
export function mousedown(payload) {
325
- return createMouseEvent('mousedown', {button: 0, buttons: 2, ...payload});
342
+ return createMouseEvent('mousedown', {
343
+ buttons: buttonsType.primary,
344
+ ...payload,
345
+ });
346
}
347
348
export function mouseenter(payload) {
@@ -346,7 +366,10 @@ export function mouseover(payload) {
366
}
367
368
export function mouseup(payload) {
349
- return createMouseEvent('mouseup', {button: 0, buttons: 2, ...payload});
369
+ return createMouseEvent('mouseup', {
370
+ buttons: buttonsType.none,
371
+ ...payload,
372
+ });
373
}
374
375
/**
packages/react-events/src/dom/testing-library/index.js
+13
-2
@@ -11,7 +11,12 @@
11
12
import * as domEvents from './domEvents';
13
import * as domEventSequences from './domEventSequences';
14
-import {hasPointerEvent, setPointerEvent, platform} from './domEnvironment';
14
+import {
15
+ buttonsType,
16
+ hasPointerEvent,
17
+ setPointerEvent,
18
+ platform,
19
+} from './domEnvironment';
20
21
const createEventTarget = node => ({
22
node,
@@ -101,4 +106,10 @@ const createEventTarget = node => ({
106
},
107
});
108
104
-export {createEventTarget, platform, hasPointerEvent, setPointerEvent};
109
+export {
110
+ buttonsType,
111
+ createEventTarget,
112
+ platform,
113
+ hasPointerEvent,
114
+ setPointerEvent,
115
+};