fix: Don't close popovers on scroll (#7541)

* fix: Don't add scroll listener to popovers

* Remove obsolete code

* Consistency

* Unnecessary async

* Better test

* Neatening up

---------

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

Author: jabrks

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

@@ -23,7 +23,7 @@ export const onCloseMap: WeakMap<Element, () => void> = new WeakMap();
 interface CloseOnScrollOptions {
   triggerRef: RefObject<Element | null>,
   isOpen?: boolean,
-  onClose?: () => void
+  onClose?: (() => void) | null
 }
 
 /** @private */

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

@@ -48,7 +48,7 @@ export interface AriaPositionProps extends PositionProps {
    */
   shouldUpdatePosition?: boolean,
   /** Handler that is called when the overlay should close. */
-  onClose?: () => void,
+  onClose?: (() => void) | null,
   /**
    * The maxHeight specified for the overlay element.
    * By default, it will take all space up to the current viewport height.

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

@@ -98,7 +98,7 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState):
     targetRef: triggerRef,
     overlayRef: popoverRef,
     isOpen: state.isOpen,
-    onClose: isNonModal ? state.close : undefined
+    onClose: isNonModal ? state.close : null
   });
 
   usePreventScroll({

packages/@react-aria/overlays/test/usePopover.test.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {fireEvent, render} from '@react-spectrum/test-utils-internal';
+import {type OverlayTriggerProps, useOverlayTriggerState} from '@react-stately/overlays';
+import React, {useRef} from 'react';
+import {useOverlayTrigger, usePopover} from '../';
+
+function Example(props: OverlayTriggerProps) {
+  const triggerRef = useRef(null);
+  const popoverRef = useRef(null);
+  const state = useOverlayTriggerState(props);
+  useOverlayTrigger({type: 'listbox'}, state, triggerRef);
+  const {popoverProps} = usePopover({triggerRef, popoverRef}, state);
+
+  return (
+    <div>
+      <div ref={triggerRef} />
+      <div {...popoverProps} ref={popoverRef} />
+    </div>
+  );
+}
+
+describe('usePopover', () => {
+  it('should not close popover on scroll', () => {
+    const onOpenChange = jest.fn();
+    render(<Example isOpen onOpenChange={onOpenChange} />);
+
+    fireEvent.scroll(document.body);
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+});