[fix] ResponderSystem negotiation logic

This fixes a bug in the negotiation logic that caused a cycle of
terminate->grant events to be sent to the current responder during a pointer
move. The root cause was using an incorrect event path in the calculation of
the lowest common ancestor's index. The fix is to ensure that the event path
stored with the current responder is pruned to begin with the node that is the
current responder (rather than any child responders it may have contained).

Author: necolas

packages/docs/src/components/Pressable/Pressable.stories.mdx

@@ -64,3 +64,9 @@ Called when the pointer is released, but not if cancelled (e.g. by a scroll that
     <Stories.feedbackEvents />
   </Story>
 </Preview>
+
+<Preview withSource='none'>
+  <Story name="panAndPress">
+    <Stories.panAndPress />
+  </Story>
+</Preview>

packages/docs/src/components/Pressable/examples/FeedbackEvents.js

@@ -56,13 +56,12 @@ export default function FeedbackEvents() {
           }}
         >
           <Pressable
-            accessibilityRole="none"
+            accessibilityRole="button"
             onLongPress={handlePress('longPress - inner')}
             onPress={handlePress('press - inner')}
             onPressIn={handlePress('pressIn - inner')}
             onPressOut={handlePress('pressOut - inner')}
             style={({ hovered, pressed, focused }) => {
-              console.log(focused);
               let backgroundColor = 'white';
               if (hovered) {
                 backgroundColor = 'lightgray';

packages/docs/src/components/Pressable/examples/PanAndPress.js

@@ -0,0 +1,100 @@
+import React, { useRef, useState } from 'react';
+import { Animated, View, StyleSheet, PanResponder, Text, TouchableOpacity } from 'react-native';
+
+const App = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+  const [x, setX] = useState(0);
+
+  const panResponder = useRef(null);
+  if (panResponder.current == null) {
+    panResponder.current = PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: e => {
+        console.log('pan grant');
+        pan.setOffset({
+          x: pan.x._value,
+          y: pan.y._value
+        });
+      },
+      onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }]),
+      onPanResponderRelease: () => {
+        console.log('pan release');
+        pan.flattenOffset();
+      },
+      onPanResponderTerminate() {
+        console.log('pan terminate');
+        pan.flattenOffset();
+      }
+    });
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.titleText}>Pressed: {x}</Text>
+      <Animated.View
+        style={{
+          transform: [{ translateX: pan.x }, { translateY: pan.y }]
+        }}
+        {...panResponder.current.panHandlers}
+      >
+        <View style={styles.box}>
+          <TouchableOpacity onPress={() => setX(x + 1)} style={styles.outerTouchable}>
+            <TouchableOpacity
+              onPress={() => {
+                console.log('press inner');
+              }}
+              style={styles.innerTouchable}
+            />
+            <TouchableOpacity disabled style={styles.innerTouchable} />
+            <TouchableOpacity
+              accessibilityRole="button"
+              disabled
+              style={[styles.innerTouchable, styles.disabledButton]}
+            />
+          </TouchableOpacity>
+        </View>
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    userSelect: 'none'
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 'bold'
+  },
+  box: {
+    height: 200,
+    width: 150,
+    backgroundColor: 'lightblue',
+    borderRadius: 5
+  },
+  outerTouchable: {
+    height: 150,
+    width: 100,
+    margin: 25,
+    backgroundColor: 'blue',
+    borderRadius: 5,
+    justifyContent: 'center'
+  },
+  innerTouchable: {
+    height: 20,
+    flex: 1,
+    marginVertical: 10,
+    marginHorizontal: 20,
+    backgroundColor: 'green',
+    borderRadius: 5
+  },
+  disabledButton: {
+    backgroundColor: 'red'
+  }
+});
+
+export default App;

packages/docs/src/components/Pressable/examples/index.js

@@ -1,3 +1,4 @@
 export { default as delayEvents } from './DelayEvents';
 export { default as disabled } from './Disabled';
 export { default as feedbackEvents } from './FeedbackEvents';
+export { default as panAndPress } from './PanAndPress';

packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js

@@ -374,12 +374,14 @@ function eventListener(domEvent: any) {
     // Start
     if (isStartEvent) {
       if (onResponderStart != null) {
+        responderEvent.dispatchConfig.registrationName = 'onResponderStart';
         onResponderStart(responderEvent);
       }
     }
     // Move
     else if (isMoveEvent) {
       if (onResponderMove != null) {
+        responderEvent.dispatchConfig.registrationName = 'onResponderMove';
         onResponderMove(responderEvent);
       }
     } else {
@@ -404,12 +406,14 @@ function eventListener(domEvent: any) {
       // End
       if (isEndEvent) {
         if (onResponderEnd != null) {
+          responderEvent.dispatchConfig.registrationName = 'onResponderEnd';
           onResponderEnd(responderEvent);
         }
       }
       // Release
       if (isReleaseEvent) {
         if (onResponderRelease != null) {
+          responderEvent.dispatchConfig.registrationName = 'onResponderRelease';
           onResponderRelease(responderEvent);
         }
         changeCurrentResponder(emptyResponder);
@@ -424,18 +428,20 @@ function eventListener(domEvent: any) {
           eventType === 'scroll' ||
           eventType === 'selectionchange'
         ) {
-          if (
-            wasNegotiated ||
-            // Only call this function is it wasn't already called during negotiation.
-            (onResponderTerminationRequest != null &&
-              onResponderTerminationRequest(responderEvent) === false)
-          ) {
+          // Only call this function is it wasn't already called during negotiation.
+          if (wasNegotiated) {
             shouldTerminate = false;
+          } else if (onResponderTerminationRequest != null) {
+            responderEvent.dispatchConfig.registrationName = 'onResponderTerminationRequest';
+            if (onResponderTerminationRequest(responderEvent) === false) {
+              shouldTerminate = false;
+            }
           }
         }
 
         if (shouldTerminate) {
           if (onResponderTerminate != null) {
+            responderEvent.dispatchConfig.registrationName = 'onResponderTerminate';
             onResponderTerminate(responderEvent);
           }
           changeCurrentResponder(emptyResponder);
@@ -466,8 +472,11 @@ function findWantsResponder(eventPaths, domEvent, responderEvent) {
       const config = getResponderConfig(id);
       const shouldSetCallback = config[callbackName];
       if (shouldSetCallback != null) {
+        responderEvent.currentTarget = node;
         if (shouldSetCallback(responderEvent) === true) {
-          return { id, node, idPath };
+          // Start the path from the potential responder
+          const prunedIdPath = idPath.slice(idPath.indexOf(id));
+          return { id, node, idPath: prunedIdPath };
         }
       }
     };
@@ -521,6 +530,7 @@ function attemptTransfer(responderEvent: ResponderEvent, wantsResponder: ActiveR
   responderEvent.bubbles = false;
   responderEvent.cancelable = false;
   responderEvent.currentTarget = node;
+
   // Set responder
   if (currentId == null) {
     if (onResponderGrant != null) {
@@ -533,22 +543,35 @@ function attemptTransfer(responderEvent: ResponderEvent, wantsResponder: ActiveR
   // Negotiate with current responder
   else {
     const { onResponderTerminate, onResponderTerminationRequest } = getResponderConfig(currentId);
-    const allowTransfer =
-      onResponderTerminationRequest != null && onResponderTerminationRequest(responderEvent);
+
+    let allowTransfer = true;
+    if (onResponderTerminationRequest != null) {
+      responderEvent.currentTarget = currentNode;
+      responderEvent.dispatchConfig.registrationName = 'onResponderTerminationRequest';
+      if (onResponderTerminationRequest(responderEvent) === false) {
+        allowTransfer = false;
+      }
+    }
+
     if (allowTransfer) {
       // Terminate existing responder
       if (onResponderTerminate != null) {
         responderEvent.currentTarget = currentNode;
+        responderEvent.dispatchConfig.registrationName = 'onResponderTerminate';
         onResponderTerminate(responderEvent);
       }
       // Grant next responder
       if (onResponderGrant != null) {
+        responderEvent.currentTarget = node;
+        responderEvent.dispatchConfig.registrationName = 'onResponderGrant';
         onResponderGrant(responderEvent);
       }
       changeCurrentResponder(wantsResponder);
     } else {
       // Reject responder request
       if (onResponderReject != null) {
+        responderEvent.currentTarget = node;
+        responderEvent.dispatchConfig.registrationName = 'onResponderReject';
         onResponderReject(responderEvent);
       }
     }