fix: Tapping outside overlay triggers elements behind underlay on Android (#8275)

* fix: Tapping outside overlay triggers elements behind underlay on Android

* fix tests

* fix more tests

Author: devongovett

packages/@react-aria/interactions/src/useInteractOutside.ts

@@ -64,20 +64,22 @@ export function useInteractOutside(props: InteractOutsideProps): void {
 
     // Use pointer events if available. Otherwise, fall back to mouse and touch events.
     if (typeof PointerEvent !== 'undefined') {
-      let onPointerUp = (e) => {
+      let onClick = (e) => {
         if (state.isPointerDown && isValidEvent(e, ref)) {
           triggerInteractOutside(e);
         }
         state.isPointerDown = false;
       };
 
       // changing these to capture phase fixed combobox
+      // Use click instead of pointerup to avoid Android Chrome issue
+      // https://issues.chromium.org/issues/40732224
       documentObject.addEventListener('pointerdown', onPointerDown, true);
-      documentObject.addEventListener('pointerup', onPointerUp, true);
+      documentObject.addEventListener('click', onClick, true);
 
       return () => {
         documentObject.removeEventListener('pointerdown', onPointerDown, true);
-        documentObject.removeEventListener('pointerup', onPointerUp, true);
+        documentObject.removeEventListener('click', onClick, true);
       };
     } else if (process.env.NODE_ENV === 'test') {
       let onMouseUp = (e) => {

packages/@react-aria/interactions/test/useInteractOutside.test.js

@@ -12,7 +12,7 @@
 
 import {fireEvent, installPointerEvent, render, waitFor} from '@react-spectrum/test-utils-internal';
 import React, {useEffect, useRef} from 'react';
-import ReactDOM, {createPortal, render as ReactDOMRender} from 'react-dom';
+import ReactDOM, {createPortal} from 'react-dom';
 import {useInteractOutside} from '../';
 
 function Example(props) {
@@ -42,10 +42,12 @@ describe('useInteractOutside', function () {
       let el = res.getByText('test');
       fireEvent(el, pointerEvent('pointerdown'));
       fireEvent(el, pointerEvent('pointerup'));
+      fireEvent.click(el);
       expect(onInteractOutside).not.toHaveBeenCalled();
 
       fireEvent(document.body, pointerEvent('pointerdown'));
       fireEvent(document.body, pointerEvent('pointerup'));
+      fireEvent.click(document.body);
       expect(onInteractOutside).toHaveBeenCalledTimes(1);
     });
 
@@ -57,10 +59,12 @@ describe('useInteractOutside', function () {
 
       fireEvent(document.body, pointerEvent('pointerdown', {button: 1}));
       fireEvent(document.body, pointerEvent('pointerup', {button: 1}));
+      fireEvent.click(document.body, {button: 1});
       expect(onInteractOutside).not.toHaveBeenCalled();
 
       fireEvent(document.body, pointerEvent('pointerdown', {button: 0}));
       fireEvent(document.body, pointerEvent('pointerup', {button: 0}));
+      fireEvent.click(document.body, {button: 0});
       expect(onInteractOutside).toHaveBeenCalledTimes(1);
     });
 
@@ -74,6 +78,7 @@ describe('useInteractOutside', function () {
       );
 
       fireEvent(document.body, pointerEvent('pointerup'));
+      fireEvent.click(document.body);
       expect(onInteractOutside).not.toHaveBeenCalled();
     });
   });
@@ -246,10 +251,12 @@ describe('useInteractOutside (iframes)', function () {
       const el = document.querySelector('iframe').contentWindow.document.body.querySelector('div[data-testid="example"]');
       fireEvent(el, pointerEvent('pointerdown'));
       fireEvent(el, pointerEvent('pointerup'));
+      fireEvent.click(el);
       expect(onInteractOutside).not.toHaveBeenCalled();
 
       fireEvent(iframeDocument.body, pointerEvent('pointerdown'));
       fireEvent(iframeDocument.body, pointerEvent('pointerup'));
+      fireEvent.click(iframeDocument.body);
       expect(onInteractOutside).toHaveBeenCalledTimes(1);
     });
 
@@ -265,10 +272,12 @@ describe('useInteractOutside (iframes)', function () {
 
       fireEvent(iframeDocument.body, pointerEvent('pointerdown', {button: 1}));
       fireEvent(iframeDocument.body, pointerEvent('pointerup', {button: 1}));
+      fireEvent.click(iframeDocument.body, {button: 0});
       expect(onInteractOutside).not.toHaveBeenCalled();
 
       fireEvent(iframeDocument.body, pointerEvent('pointerdown', {button: 0}));
       fireEvent(iframeDocument.body, pointerEvent('pointerup', {button: 0}));
+      fireEvent.click(iframeDocument.body, {button: 0});
       expect(onInteractOutside).toHaveBeenCalledTimes(1);
     });
 
@@ -285,6 +294,7 @@ describe('useInteractOutside (iframes)', function () {
         expect(document.querySelector('iframe').contentWindow.document.body.querySelector('div[data-testid="example"]')).toBeTruthy();
       });
       fireEvent(iframeDocument.body, pointerEvent('pointerup'));
+      fireEvent.click(iframeDocument.body);
       expect(onInteractOutside).not.toHaveBeenCalled();
     });
   });

packages/@react-aria/overlays/test/useModalOverlay.test.js

@@ -40,6 +40,7 @@ describe('useModalOverlay', function () {
         render(<Example isOpen onOpenChange={onOpenChange} isDismissable shouldCloseOnInteractOutside={target => target === document.body} />);
         pressStart(document.body);
         pressEnd(document.body);
+        fireEvent.click(document.body);
         expect(onOpenChange).toHaveBeenCalledWith(false);
       });
 
@@ -48,6 +49,7 @@ describe('useModalOverlay', function () {
         render(<Example isOpen onOpenChange={onOpenChange} isDismissable shouldCloseOnInteractOutside={target => target !== document.body} />);
         pressStart(document.body);
         pressEnd(document.body);
+        fireEvent.click(document.body);
         expect(onOpenChange).not.toHaveBeenCalled();
       });
     });

packages/@react-aria/overlays/test/useOverlay.test.js

@@ -61,6 +61,7 @@ describe('useOverlay', function () {
       render(<Example isOpen onClose={onClose} isDismissable />);
       pressStart(document.body);
       pressEnd(document.body);
+      fireEvent.click(document.body);
       expect(onClose).toHaveBeenCalledTimes(1);
     });
 
@@ -69,6 +70,7 @@ describe('useOverlay', function () {
       render(<Example isOpen onClose={onClose} isDismissable shouldCloseOnInteractOutside={target => target === document.body} />);
       pressStart(document.body);
       pressEnd(document.body);
+      fireEvent.click(document.body);
       expect(onClose).toHaveBeenCalledTimes(1);
     });
 
@@ -77,6 +79,7 @@ describe('useOverlay', function () {
       render(<Example isOpen onClose={onClose} isDismissable shouldCloseOnInteractOutside={target => target !== document.body} />);
       pressStart(document.body);
       pressEnd(document.body);
+      fireEvent.click(document.body);
       expect(onClose).toHaveBeenCalledTimes(0);
     });
 
@@ -85,6 +88,7 @@ describe('useOverlay', function () {
       render(<Example isOpen onClose={onClose} isDismissable={false} />);
       pressStart(document.body);
       pressEnd(document.body);
+      fireEvent.click(document.body);
       expect(onClose).toHaveBeenCalledTimes(0);
     });
 
@@ -96,13 +100,15 @@ describe('useOverlay', function () {
 
       pressStart(document.body);
       pressEnd(document.body);
+      fireEvent.click(document.body);
       expect(onCloseSecond).toHaveBeenCalledTimes(1);
       expect(onCloseFirst).not.toHaveBeenCalled();
 
       second.unmount();
 
       pressStart(document.body);
       pressEnd(document.body);
+      fireEvent.click(document.body);
       expect(onCloseFirst).toHaveBeenCalledTimes(1);
     });
   });