fix(@react-aria/overlays): prevent exception on Cypress (#2341)

* fix(@react-aria/overlays): prevent exception on Cypress

Cypress screenshot command triggers a scroll event where the event target is window, not a DOM element.

closes #2340

* test(@react-aria/overlays): add two test case for close on scroll

related to #2340.

The first test case is related to the regression mentioned here: #2341 (comment)

The second test case captures the fix for the cypress issue.

* window scroll to behave same as document

* remove comment that no longer applies

Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: 3 people

packages/@react-aria/overlays/src/useCloseOnScroll.ts

@@ -36,8 +36,9 @@ export function useCloseOnScroll(opts: CloseOnScrollOptions) {
 
     let onScroll = (e: MouseEvent) => {
       // Ignore if scrolling an scrollable region outside the trigger's tree.
-      let target = e.target as HTMLElement;
-      if (!triggerRef.current || !target.contains(triggerRef.current)) {
+      let target = e.target;
+      // window is not a Node and doesn't have contain, but window contains everything
+      if (!triggerRef.current || ((target instanceof Node) && !target.contains(triggerRef.current))) {
         return;
       }
 

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

@@ -163,6 +163,22 @@ describe('useOverlayPosition', function () {
     fireEvent.scroll(document.body);
     expect(onClose).toHaveBeenCalledTimes(1);
   });
+
+  it('should close the overlay when the document scrolls', function () {
+    let onClose = jest.fn();
+    render(<Example isOpen onClose={onClose} />);
+
+    fireEvent.scroll(document);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should close the overlay when target is window in a scroll event', function () {
+    let onClose = jest.fn();
+    render(<Example isOpen onClose={onClose} />);
+
+    fireEvent.scroll(window);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe('useOverlayPosition with positioned container', () => {