From 6ff4c9de1c1c8f47148b68651a9f8ab72b5d31f8 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@fb.com>
Date: Thu, 20 Jun 2019 17:10:54 -0700
Subject: [PATCH] [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.
---
 packages/react-events/src/Press.js            |  3 ++
 .../src/__tests__/Press-test.internal.js      | 48 +++++++++----------
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/packages/react-events/src/Press.js b/packages/react-events/src/Press.js
index c6d00176a9..9bab5fa8f1 100644
--- a/packages/react-events/src/Press.js
+++ b/packages/react-events/src/Press.js
@@ -420,6 +420,8 @@ function dispatchPressEndEvents(
       deactivate(event, context, props, state);
     }
   }
+
+  state.responderRegionOnDeactivation = null;
 }
 
 function dispatchCancel(
@@ -726,6 +728,7 @@ const PressResponder = {
             state.pressTarget,
             props,
           );
+          state.responderRegionOnDeactivation = null;
           state.isPressWithinResponderRegion = true;
           dispatchPressStartEvents(event, context, props, state);
           addRootEventTypes(context, state);
diff --git a/packages/react-events/src/__tests__/Press-test.internal.js b/packages/react-events/src/__tests__/Press-test.internal.js
index 74a13c7a5d..5da6fe6575 100644
--- a/packages/react-events/src/__tests__/Press-test.internal.js
+++ b/packages/react-events/src/__tests__/Press-test.internal.js
@@ -991,8 +991,8 @@ describe('Event responder: Press', () => {
       height: 100,
       top: 50,
       left: 50,
-      right: 500,
-      bottom: 500,
+      right: 150,
+      bottom: 150,
     };
     const pressRectOffset = 20;
     const getBoundingClientRectMock = () => rectMock;
@@ -1564,8 +1564,8 @@ describe('Event responder: Press', () => {
       height: 100,
       top: 50,
       left: 50,
-      right: 500,
-      bottom: 500,
+      right: 150,
+      bottom: 150,
     };
     const pressRectOffset = 20;
     const getBoundingClientRectMock = () => rectMock;
@@ -1771,8 +1771,8 @@ describe('Event responder: Press', () => {
           height: 80,
           top: 60,
           left: 60,
-          right: 490,
-          bottom: 490,
+          right: 140,
+          bottom: 140,
         });
         const coordinates = {
           clientX: rectMock.left,
@@ -1825,8 +1825,8 @@ describe('Event responder: Press', () => {
           height: 200,
           top: 0,
           left: 0,
-          right: 550,
-          bottom: 550,
+          right: 200,
+          bottom: 200,
         });
         const coordinates = {
           clientX: rectMock.left - 50,
@@ -1893,16 +1893,16 @@ describe('Event responder: Press', () => {
           }),
         );
         document.elementFromPoint = () => container;
-        ref.current.dispatchEvent(
+        container.dispatchEvent(
           createTouchEvent('touchmove', 0, {
             ...coordinatesOutside,
-            target: ref.current,
+            target: container,
           }),
         );
-        ref.current.dispatchEvent(
+        container.dispatchEvent(
           createTouchEvent('touchend', 0, {
             ...coordinatesOutside,
-            target: ref.current,
+            target: container,
           }),
         );
         jest.runAllTimers();
@@ -1962,10 +1962,10 @@ describe('Event responder: Press', () => {
         jest.runAllTimers();
         expect(events).toEqual(['onPressMove']);
         events = [];
-        ref.current.dispatchEvent(
+        container.dispatchEvent(
           createTouchEvent('touchend', 0, {
             ...coordinatesOutside,
-            target: ref.current,
+            target: container,
           }),
         );
         jest.runAllTimers();
@@ -2007,10 +2007,10 @@ describe('Event responder: Press', () => {
         }),
       );
       document.elementFromPoint = () => container;
-      ref.current.dispatchEvent(
+      container.dispatchEvent(
         createTouchEvent('touchmove', 0, {
           ...coordinatesOutside,
-          target: ref.current,
+          target: container,
         }),
       );
       ref.current.dispatchEvent(
@@ -2068,8 +2068,8 @@ describe('Event responder: Press', () => {
       ref.current.getBoundingClientRect = () => ({
         top: 0,
         left: 0,
-        bottom: 0,
-        right: 0,
+        bottom: 100,
+        right: 100,
       });
 
       // 1
@@ -2152,8 +2152,8 @@ describe('Event responder: Press', () => {
       ref.current.getBoundingClientRect = () => ({
         top: 0,
         left: 0,
-        bottom: 0,
-        right: 0,
+        bottom: 100,
+        right: 100,
       });
 
       ref.current.dispatchEvent(createEvent('pointerdown'));
@@ -2186,8 +2186,8 @@ describe('Event responder: Press', () => {
         ref.current.getBoundingClientRect = () => ({
           top: 0,
           left: 0,
-          bottom: 0,
-          right: 0,
+          bottom: 100,
+          right: 100,
         });
 
         ref.current.dispatchEvent(createEvent('pointerdown'));
@@ -2488,8 +2488,8 @@ describe('Event responder: Press', () => {
     ref.current.getBoundingClientRect = () => ({
       top: 10,
       left: 10,
-      bottom: 20,
-      right: 20,
+      bottom: 110,
+      right: 110,
     });
 
     ref.current.dispatchEvent(