[react-events] Fix middle-click for Press (#16546)
Browsers always report 'buttons' as 0 when a pointer is released.
Nicolas Gallagher committed
Aug 22, 2019 at 10:22 UTC
2f03aa6eed14ae30e586b77e40b2da9ea5e6facc
3 files changed
+14
-18
packages/react-events/src/dom/Press.js
+9
-13
@@ -43,6 +43,7 @@ type PressState = {
43
y: number,
44
|}>,
45
addedRootEvents: boolean,
46
+ buttons: 0 | 1 | 4,
47
isActivePressed: boolean,
48
isActivePressStart: boolean,
49
isPressed: boolean,
@@ -149,9 +150,9 @@ function createPressEvent(
150
event: ?ReactDOMResponderEvent,
151
touchEvent: null | Touch,
152
defaultPrevented: boolean,
153
+ state: PressState,
154
): PressEvent {
155
const timeStamp = context.getTimeStamp();
154
- let buttons = 1;
156
let clientX = null;
157
let clientY = null;
158
let pageX = null;
@@ -171,20 +172,12 @@ function createPressEvent(
172
let eventObject;
173
eventObject = (touchEvent: any) || (nativeEvent: any);
174
if (eventObject) {
174
- ({
175
- buttons,
176
- clientX,
177
- clientY,
178
- pageX,
179
- pageY,
180
- screenX,
181
- screenY,
182
- } = eventObject);
175
+ ({clientX, clientY, pageX, pageY, screenX, screenY} = eventObject);
176
}
177
}
178
return {
179
altKey,
187
- buttons,
180
+ buttons: state.buttons,
181
clientX,
182
clientY,
183
ctrlKey,
@@ -226,6 +219,7 @@ function dispatchEvent(
219
event,
220
touchEvent,
221
defaultPrevented,
222
+ state,
223
);
224
context.dispatchEvent(syntheticEvent, listener, eventPriority);
225
}
@@ -493,6 +487,7 @@ const pressResponderImpl = {
487
return {
488
activationPosition: null,
489
addedRootEvents: false,
490
+ buttons: 0,
491
isActivePressed: false,
492
isActivePressStart: false,
493
isPressed: false,
@@ -586,7 +581,7 @@ const pressResponderImpl = {
581
state.activePointerId = touchEvent.identifier;
582
}
583
589
- // Ignore any device buttons except primary/secondary and touch/pen contact.
584
+ // Ignore any device buttons except primary/middle and touch/pen contact.
585
// Additionally we ignore primary-button + ctrl-key with Macs as that
586
// acts like right-click and opens the contextmenu.
587
if (
@@ -606,6 +601,7 @@ const pressResponderImpl = {
601
}
602
state.responderRegionOnDeactivation = null;
603
state.isPressWithinResponderRegion = true;
604
+ state.buttons = nativeEvent.buttons;
605
dispatchPressStartEvents(event, context, props, state);
606
addRootEventTypes(context, state);
607
} else {
@@ -709,7 +705,7 @@ const pressResponderImpl = {
705
case 'mouseup':
706
case 'touchend': {
707
if (isPressed) {
712
- const buttons = nativeEvent.buttons;
708
+ const buttons = state.buttons;
709
let isKeyboardEvent = false;
710
let touchEvent;
711
if (type === 'pointerup' && activePointerId !== pointerId) {
packages/react-events/src/dom/__tests__/Press-test.internal.js
+3
-3
@@ -136,7 +136,7 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
136
const target = createEventTarget(node);
137
target.setBoundingClientRect({x: 0, y: 0, width: 100, height: 100});
138
target.pointerdown({buttons: buttonsType.middle, pointerType: 'mouse'});
139
- target.pointerup({buttons: buttonsType.middle, pointerType: 'mouse'});
139
+ target.pointerup({pointerType: 'mouse'});
140
target.pointerhover({x: 110, y: 110});
141
target.pointerhover({x: 50, y: 50});
142
expect(onPressStart).toHaveBeenCalledTimes(1);
@@ -216,7 +216,7 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
216
it('is called after middle-button pointer up', () => {
217
const target = createEventTarget(ref.current);
218
target.pointerdown({buttons: buttonsType.middle, pointerType: 'mouse'});
219
- target.pointerup({buttons: buttonsType.middle, pointerType: 'mouse'});
219
+ target.pointerup({pointerType: 'mouse'});
220
expect(onPressEnd).toHaveBeenCalledTimes(1);
221
expect(onPressEnd).toHaveBeenCalledWith(
222
expect.objectContaining({
@@ -357,7 +357,7 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
357
it('is not called after middle-button press', () => {
358
const target = createEventTarget(ref.current);
359
target.pointerdown({buttons: buttonsType.middle, pointerType: 'mouse'});
360
- target.pointerup({buttons: buttonsType.middle, pointerType: 'mouse'});
360
+ target.pointerup({pointerType: 'mouse'});
361
expect(onPress).not.toHaveBeenCalled();
362
});
363
packages/react-events/src/dom/testing-library/domEvents.js
+2
-2
@@ -329,8 +329,8 @@ export function pointerover(payload) {
329
330
export function pointerup(payload) {
331
return createPointerEvent('pointerup', {
332
- buttons: buttonsType.none,
332
...payload,
333
+ buttons: buttonsType.none,
334
});
335
}
336
@@ -367,8 +367,8 @@ export function mouseover(payload) {
367
368
export function mouseup(payload) {
369
return createMouseEvent('mouseup', {
370
- buttons: buttonsType.none,
370
...payload,
371
+ buttons: buttonsType.none,
372
});
373
}
374