[Flare] Deeply prevent default on anchor elements (#15750)

Author: trueadm

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

@@ -424,11 +424,12 @@ const eventResponderContext: ReactResponderContext = {
   isTargetWithinHostComponent(
     target: Element | Document,
     elementType: string,
+    deep: boolean,
   ): boolean {
     validateResponderContext();
     let fiber = getClosestInstanceFromNode(target);
     while (fiber !== null) {
-      if (fiber.stateNode === currentInstance) {
+      if (!deep && fiber.stateNode === currentInstance) {
         return false;
       }
       if (fiber.tag === HostComponent && fiber.type === elementType) {

packages/react-events/src/Press.js

@@ -724,7 +724,7 @@ const PressResponder = {
       }
 
       case 'click': {
-        if (context.isTargetWithinHostComponent(target, 'a')) {
+        if (context.isTargetWithinHostComponent(target, 'a', true)) {
           const {
             altKey,
             ctrlKey,

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

@@ -2137,6 +2137,25 @@ describe('Event responder: Press', () => {
       expect(preventDefault).toBeCalled();
     });
 
+    it('deeply prevents native behaviour by default', () => {
+      const onPress = jest.fn();
+      const preventDefault = jest.fn();
+      const buttonRef = React.createRef();
+      const element = (
+        <a href="#">
+          <Press onPress={onPress}>
+            <button ref={buttonRef} />
+          </Press>
+        </a>
+      );
+      ReactDOM.render(element, container);
+
+      buttonRef.current.dispatchEvent(createEvent('pointerdown'));
+      buttonRef.current.dispatchEvent(createEvent('pointerup'));
+      buttonRef.current.dispatchEvent(createEvent('click', {preventDefault}));
+      expect(preventDefault).toBeCalled();
+    });
+
     it('prevents native behaviour by default with nested elements', () => {
       const onPress = jest.fn();
       const preventDefault = jest.fn();

packages/shared/ReactTypes.js

@@ -194,5 +194,6 @@ export type ReactResponderContext = {
   isTargetWithinHostComponent: (
     target: Element | Document,
     elementType: string,
+    deep: boolean,
   ) => boolean,
 };