Make all submenus close upon user interact outside (#4988)

* Make all submenus close upon user interact outside

* add test

* refactor to close on underlay press

* turns out we dont need the ref

* restrict to spectrum for now

adding the logic to useOverlay brings up the possibility where a user could have a dismissible overlay open a non dismissible overlay but the absense of a underlay for the non dismissible overlay would then make the click on the dismissible overlay's underlay close both overlays which is different behavior from before. Isolating this change to spectrum for our submenu case until we implement something like focusscope tree to detect clicks outside the tree of menus

Author: LFDanLu

packages/@react-spectrum/menu/test/MenuTrigger.test.js

@@ -1177,6 +1177,33 @@ describe('MenuTrigger', function () {
         let dialog = tree.getByRole('dialog');
         expect(dialog).toBeVisible();
       });
+
+      it('should close everything if the user clicks on the underlay of the root menu', function () {
+        renderTree();
+        let menu = openMenu();
+        let menuItems = within(menu).getAllByRole('menuitem');
+        let unavailableItem = menuItems[4];
+        expect(unavailableItem).toBeVisible();
+        expect(unavailableItem).toHaveAttribute('aria-haspopup', 'dialog');
+
+        fireEvent.mouseEnter(unavailableItem);
+        act(() => {jest.runAllTimers();});
+        let dialog = tree.getByRole('dialog');
+        expect(dialog).toBeVisible();
+
+        expect(document.activeElement).toBe(dialog);
+
+        let underlay = tree.getByTestId('underlay', {hidden: true});
+        fireEvent.pointerDown(underlay);
+        fireEvent.pointerUp(underlay);
+        act(() => {jest.runAllTimers();});
+        act(() => {jest.runAllTimers();});
+        expect(dialog).not.toBeInTheDocument();
+        expect(menu).not.toBeInTheDocument();
+
+        let triggerButton = tree.getByRole('button');
+        expect(document.activeElement).toBe(triggerButton);
+      });
     });
   });
 });

packages/@react-spectrum/overlays/src/Popover.tsx

@@ -115,10 +115,14 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
   }, state);
   let {focusWithinProps} = useFocusWithin(props);
 
+  let onPointerDown = () => {
+    state.close();
+  };
+
   // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
   return (
     <div ref={wrapperRef}>
-      {!isNonModal && <Underlay isTransparent {...underlayProps} isOpen={isOpen} /> }
+      {!isNonModal && <Underlay isTransparent {...mergeProps(underlayProps, {onPointerDown})} isOpen={isOpen} /> }
       <div
         {...styleProps}
         {...mergeProps(popoverProps, focusWithinProps)}

packages/@react-spectrum/overlays/src/Underlay.tsx

@@ -19,8 +19,8 @@ interface UnderlayProps {
   isTransparent?: boolean
 }
 
-export function Underlay({isOpen, isTransparent}: UnderlayProps) {
+export function Underlay({isOpen, isTransparent, ...otherProps}: UnderlayProps) {
   return (
-    <div className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen, 'spectrum-Underlay--transparent': isTransparent})} />
+    <div data-testid="underlay" {...otherProps} className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen, 'spectrum-Underlay--transparent': isTransparent})} />
   );
 }