[Flare] Fix Press scroll cancellation handling (#15983)

packages/react-dom/src/events/DOMEventResponderSystem.js

@@ -1037,7 +1037,11 @@ export function dispatchEventForResponderEventSystem(
     const previouslyInHook = currentlyInHook;
     currentTimers = null;
     currentEventQueue = createEventQueue();
-    currentDocument = (nativeEventTarget: any).ownerDocument;
+    // nodeType 9 is DOCUMENT_NODE
+    currentDocument =
+      (nativeEventTarget: any).nodeType === 9
+        ? ((nativeEventTarget: any): Document)
+        : (nativeEventTarget: any).ownerDocument;
     // We might want to control timeStamp another way here
     currentTimeStamp = (nativeEvent: any).timeStamp;
     try {

packages/react-events/src/dom/Press.js

@@ -1002,8 +1002,23 @@ const PressResponder: ReactDOMEventResponder = {
       }
 
       // CANCEL
+      case 'scroll': {
+        const pressTarget = state.pressTarget;
+        const scrollTarget = nativeEvent.target;
+        const doc = context.getActiveDocument();
+        // If the scroll target is the document or if the press target
+        // is inside the scroll target, then this a scroll that should
+        // trigger a cancel.
+        if (
+          pressTarget !== null &&
+          (scrollTarget === doc ||
+            context.isTargetWithinElement(pressTarget, scrollTarget))
+        ) {
+          dispatchCancel(event, context, props, state);
+        }
+        break;
+      }
       case 'pointercancel':
-      case 'scroll':
       case 'touchcancel':
       case 'dragstart': {
         dispatchCancel(event, context, props, state);

packages/react-events/src/dom/__tests__/Press-test.internal.js

@@ -2458,6 +2458,60 @@ describe('Event responder: Press', () => {
     });
   });
 
+  it('does end on "scroll" to document', () => {
+    const onPressEnd = jest.fn();
+    const ref = React.createRef();
+    const element = (
+      <div>
+        <Press onPressEnd={onPressEnd}>
+          <a href="#" ref={ref} />
+        </Press>
+      </div>
+    );
+    ReactDOM.render(element, container);
+
+    ref.current.dispatchEvent(createEvent('pointerdown'));
+    document.dispatchEvent(createEvent('scroll'));
+    expect(onPressEnd).toHaveBeenCalledTimes(1);
+  });
+
+  it('does end on "scroll" to a parent container', () => {
+    const onPressEnd = jest.fn();
+    const ref = React.createRef();
+    const containerRef = React.createRef();
+    const element = (
+      <div ref={containerRef}>
+        <Press onPressEnd={onPressEnd}>
+          <a href="#" ref={ref} />
+        </Press>
+      </div>
+    );
+    ReactDOM.render(element, container);
+
+    ref.current.dispatchEvent(createEvent('pointerdown'));
+    containerRef.current.dispatchEvent(createEvent('scroll'));
+    expect(onPressEnd).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not end on "scroll" to an element outside', () => {
+    const onPressEnd = jest.fn();
+    const ref = React.createRef();
+    const outsideRef = React.createRef();
+    const element = (
+      <div>
+        <Press onPressEnd={onPressEnd}>
+          <a href="#" ref={ref} />
+        </Press>
+        <span ref={outsideRef} />
+      </div>
+    );
+    ReactDOM.render(element, container);
+
+    ref.current.dispatchEvent(createEvent('pointerdown'));
+    outsideRef.current.dispatchEvent(createEvent('scroll'));
+    expect(onPressEnd).not.toBeCalled();
+  });
+
   it('expect displayName to show up for event component', () => {
     expect(Press.responder.displayName).toBe('Press');
   });