[Flare] Press: fix middle-click handling (#16114)
Make sure the root events are removed after middle-click completes
Nicolas Gallagher committed
Jul 11, 2019 at 22:12 UTC
ca4d78f9b6178de97ba4692ffb86647f2e2ef04d
2 files changed
+47
-4
packages/react-events/src/dom/Press.js
+5
-4
@@ -893,6 +893,7 @@ const PressResponder: ReactDOMEventResponder = {
893
case 'mouseup':
894
case 'touchend': {
895
if (isPressed) {
896
+ const button = nativeEvent.button;
897
let isKeyboardEvent = false;
898
let touchEvent;
899
if (type === 'pointerup' && activePointerId !== pointerId) {
@@ -911,6 +912,9 @@ const PressResponder: ReactDOMEventResponder = {
912
}
913
isKeyboardEvent = true;
914
removeRootEventTypes(context, state);
915
+ } else if (button === 1) {
916
+ // Remove the root events here as no 'click' event is dispatched when this 'button' is pressed.
917
+ removeRootEventTypes(context, state);
918
}
919
920
// Determine whether to call preventDefault on subsequent native events.
@@ -968,10 +972,7 @@ const PressResponder: ReactDOMEventResponder = {
972
state,
973
);
974
}
971
- if (
972
- state.isPressWithinResponderRegion &&
973
- nativeEvent.button !== 1
974
- ) {
975
+ if (state.isPressWithinResponderRegion && button !== 1) {
976
if (
977
!(
978
wasLongPressed &&
packages/react-events/src/dom/__tests__/Press-test.internal.js
+42
@@ -150,6 +150,48 @@ describe('Event responder: Press', () => {
150
);
151
});
152
153
+ it('is not called after "pointermove" following auxillary-button press', () => {
154
+ ref.current.getBoundingClientRect = () => ({
155
+ top: 0,
156
+ left: 0,
157
+ bottom: 100,
158
+ right: 100,
159
+ });
160
+ ref.current.dispatchEvent(
161
+ createEvent('pointerdown', {
162
+ button: 1,
163
+ pointerType: 'mouse',
164
+ clientX: 50,
165
+ clientY: 50,
166
+ }),
167
+ );
168
+ ref.current.dispatchEvent(
169
+ createEvent('pointerup', {
170
+ button: 1,
171
+ pointerType: 'mouse',
172
+ clientX: 50,
173
+ clientY: 50,
174
+ }),
175
+ );
176
+ container.dispatchEvent(
177
+ createEvent('pointermove', {
178
+ button: 1,
179
+ pointerType: 'mouse',
180
+ clientX: 110,
181
+ clientY: 110,
182
+ }),
183
+ );
184
+ container.dispatchEvent(
185
+ createEvent('pointermove', {
186
+ button: 1,
187
+ pointerType: 'mouse',
188
+ clientX: 50,
189
+ clientY: 50,
190
+ }),
191
+ );
192
+ expect(onPressStart).toHaveBeenCalledTimes(1);
193
+ });
194
+
195
it('ignores browser emulated events', () => {
196
ref.current.dispatchEvent(createEvent('pointerdown'));
197
ref.current.dispatchEvent(createEvent('touchstart'));