[Flare] Press: fix stale deactivation region state (#15931)
The responder region calculation logic wasn't updating the deactivation region during the lifetime of an event instance, causing incorrect behaviour when the current press ends outside the press target and if the press target has moved since the last time the first-and-only time the deactivation region was measured.
Nicolas Gallagher committed
Jun 20, 2019 at 17:10 UTC
6ff4c9de1c1c8f47148b68651a9f8ab72b5d31f8
2 files changed
+27
-24
packages/react-events/src/Press.js
+3
@@ -420,6 +420,8 @@ function dispatchPressEndEvents(
420
deactivate(event, context, props, state);
421
}
422
}
423
+
424
+ state.responderRegionOnDeactivation = null;
425
}
426
427
function dispatchCancel(
@@ -726,6 +728,7 @@ const PressResponder = {
728
state.pressTarget,
729
props,
730
);
731
+ state.responderRegionOnDeactivation = null;
732
state.isPressWithinResponderRegion = true;
733
dispatchPressStartEvents(event, context, props, state);
734
addRootEventTypes(context, state);
packages/react-events/src/__tests__/Press-test.internal.js
+24
-24
@@ -991,8 +991,8 @@ describe('Event responder: Press', () => {
991
height: 100,
992
top: 50,
993
left: 50,
994
- right: 500,
995
- bottom: 500,
994
+ right: 150,
995
+ bottom: 150,
996
};
997
const pressRectOffset = 20;
998
const getBoundingClientRectMock = () => rectMock;
@@ -1564,8 +1564,8 @@ describe('Event responder: Press', () => {
1564
height: 100,
1565
top: 50,
1566
left: 50,
1567
- right: 500,
1568
- bottom: 500,
1567
+ right: 150,
1568
+ bottom: 150,
1569
};
1570
const pressRectOffset = 20;
1571
const getBoundingClientRectMock = () => rectMock;
@@ -1771,8 +1771,8 @@ describe('Event responder: Press', () => {
1771
height: 80,
1772
top: 60,
1773
left: 60,
1774
- right: 490,
1775
- bottom: 490,
1774
+ right: 140,
1775
+ bottom: 140,
1776
});
1777
const coordinates = {
1778
clientX: rectMock.left,
@@ -1825,8 +1825,8 @@ describe('Event responder: Press', () => {
1825
height: 200,
1826
top: 0,
1827
left: 0,
1828
- right: 550,
1829
- bottom: 550,
1828
+ right: 200,
1829
+ bottom: 200,
1830
});
1831
const coordinates = {
1832
clientX: rectMock.left - 50,
@@ -1893,16 +1893,16 @@ describe('Event responder: Press', () => {
1893
}),
1894
);
1895
document.elementFromPoint = () => container;
1896
- ref.current.dispatchEvent(
1896
+ container.dispatchEvent(
1897
createTouchEvent('touchmove', 0, {
1898
...coordinatesOutside,
1899
- target: ref.current,
1899
+ target: container,
1900
}),
1901
);
1902
- ref.current.dispatchEvent(
1902
+ container.dispatchEvent(
1903
createTouchEvent('touchend', 0, {
1904
...coordinatesOutside,
1905
- target: ref.current,
1905
+ target: container,
1906
}),
1907
);
1908
jest.runAllTimers();
@@ -1962,10 +1962,10 @@ describe('Event responder: Press', () => {
1962
jest.runAllTimers();
1963
expect(events).toEqual(['onPressMove']);
1964
events = [];
1965
- ref.current.dispatchEvent(
1965
+ container.dispatchEvent(
1966
createTouchEvent('touchend', 0, {
1967
...coordinatesOutside,
1968
- target: ref.current,
1968
+ target: container,
1969
}),
1970
);
1971
jest.runAllTimers();
@@ -2007,10 +2007,10 @@ describe('Event responder: Press', () => {
2007
}),
2008
);
2009
document.elementFromPoint = () => container;
2010
- ref.current.dispatchEvent(
2010
+ container.dispatchEvent(
2011
createTouchEvent('touchmove', 0, {
2012
...coordinatesOutside,
2013
- target: ref.current,
2013
+ target: container,
2014
}),
2015
);
2016
ref.current.dispatchEvent(
@@ -2068,8 +2068,8 @@ describe('Event responder: Press', () => {
2068
ref.current.getBoundingClientRect = () => ({
2069
top: 0,
2070
left: 0,
2071
- bottom: 0,
2072
- right: 0,
2071
+ bottom: 100,
2072
+ right: 100,
2073
});
2074
2075
// 1
@@ -2152,8 +2152,8 @@ describe('Event responder: Press', () => {
2152
ref.current.getBoundingClientRect = () => ({
2153
top: 0,
2154
left: 0,
2155
- bottom: 0,
2156
- right: 0,
2155
+ bottom: 100,
2156
+ right: 100,
2157
});
2158
2159
ref.current.dispatchEvent(createEvent('pointerdown'));
@@ -2186,8 +2186,8 @@ describe('Event responder: Press', () => {
2186
ref.current.getBoundingClientRect = () => ({
2187
top: 0,
2188
left: 0,
2189
- bottom: 0,
2190
- right: 0,
2189
+ bottom: 100,
2190
+ right: 100,
2191
});
2192
2193
ref.current.dispatchEvent(createEvent('pointerdown'));
@@ -2488,8 +2488,8 @@ describe('Event responder: Press', () => {
2488
ref.current.getBoundingClientRect = () => ({
2489
top: 10,
2490
left: 10,
2491
- bottom: 20,
2492
- right: 20,
2491
+ bottom: 110,
2492
+ right: 110,
2493
});
2494
2495
ref.current.dispatchEvent(