fix: prevent Modal from closing when dismissing DateRangePicker via outside click

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

@@ -12,7 +12,7 @@
 
 import {DOMAttributes, RefObject} from '@react-types/shared';
 import {isElementInChildOfActiveScope} from '@react-aria/focus';
-import {useEffect} from 'react';
+import {useEffect, useRef} from 'react';
 import {useFocusWithin, useInteractOutside} from '@react-aria/interactions';
 
 export interface AriaOverlayProps {
@@ -70,6 +70,8 @@ export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element | nul
     shouldCloseOnInteractOutside
   } = props;
 
+  let lastVisibleOverlay = useRef<RefObject<Element | null>>(undefined);
+
   // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.
   useEffect(() => {
     if (isOpen && !visibleOverlays.includes(ref)) {
@@ -91,8 +93,10 @@ export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element | nul
   };
 
   let onInteractOutsideStart = (e: PointerEvent) => {
+    const topMostOverlay = visibleOverlays[visibleOverlays.length - 1];
+    lastVisibleOverlay.current = topMostOverlay;
     if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {
-      if (visibleOverlays[visibleOverlays.length - 1] === ref) {
+      if (topMostOverlay === ref) {
         e.stopPropagation();
         e.preventDefault();
       }
@@ -105,8 +109,11 @@ export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element | nul
         e.stopPropagation();
         e.preventDefault();
       }
-      onHide();
+      if (lastVisibleOverlay.current === ref) {
+        onHide();
+      }
     }
+    lastVisibleOverlay.current = undefined;
   };
 
   // Handle the escape key

packages/react-aria-components/stories/Modal.stories.tsx

@@ -14,6 +14,7 @@ import {Button, ComboBox, Dialog, DialogTrigger, Heading, Input, Label, ListBox,
 import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import './styles.css';
+import {DateRangePickerExample} from './DatePicker.stories';
 import {MyListBoxItem} from './utils';
 import styles from '../example/index.css';
 
@@ -148,3 +149,47 @@ export const InertTestStory = {
     }
   }
 };
+
+function DateRangePickerInsideModal() {
+  return (
+    <DialogTrigger>
+      <Button>Open modal</Button>
+      <ModalOverlay
+        isDismissable
+        style={{
+          alignItems: 'center',
+          background: 'rgba(0, 0, 0, 0.5)',
+          display: 'flex',
+          justifyContent: 'center',
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          zIndex: 100
+        }}>
+        <Modal
+          style={{
+            background: 'Canvas',
+            border: '1px solid gray',
+            color: 'CanvasText',
+            padding: 30
+          }}>
+          <Dialog>
+            {/* @ts-ignore */}
+            <DateRangePickerExample />
+          </Dialog>
+        </Modal>
+      </ModalOverlay>
+    </DialogTrigger>
+  );
+}
+
+export const DateRangePickerInsideModalStory = {
+  render: () => <DateRangePickerInsideModal />,
+  parameters: {
+    description: {
+      data: 'Open the Modal, then open the DateRangePicker and select a start date. Clicking outside the Modal should close the picker but keep the Modal open.'
+    }
+  }
+};

packages/react-aria-components/test/Dialog.test.js

@@ -27,11 +27,15 @@ import {
   Popover,
   TextField
 } from '../';
+import {composeStories} from '@storybook/react';
 import React, {useRef} from 'react';
+import * as stories from '../stories/Modal.stories';
 import {UNSAFE_PortalProvider} from '@react-aria/overlays';
 import {User} from '@react-aria/test-utils';
 import userEvent from '@testing-library/user-event';
 
+let {DateRangePickerInsideModalStory: DateRangePickerInsideModal} = composeStories(stories);
+
 describe('Dialog', () => {
   let user;
   let testUtilUser = new User({advanceTimer: jest.advanceTimersByTime});
@@ -461,4 +465,26 @@ describe('Dialog', () => {
     const input = getByTestId('email');
     expect(document.activeElement).toBe(input);
   });
+
+  it('should not close Modal when DateRangePicker is dismissed by outside click', async () => {
+    let {getAllByRole, getByRole} = render(<DateRangePickerInsideModal />);
+    await user.click(getByRole('button'));
+
+    let modal = getByRole('dialog').closest('.react-aria-ModalOverlay');
+    expect(modal).toBeInTheDocument();
+
+    let button = getByRole('group').querySelector('.react-aria-Button');
+    expect(button).toHaveAttribute('aria-label', 'Calendar');
+    await user.click(button);
+
+    let popover = getByRole('dialog').closest('.react-aria-Popover');
+    expect(popover).toBeInTheDocument();
+    expect(popover).toHaveAttribute('data-trigger', 'DateRangePicker');
+
+    let cells = getAllByRole('gridcell');
+    await user.click(cells[5].children[0]);
+    await user.click(document.body);
+    expect(popover).not.toBeInTheDocument();
+    expect(modal).toBeInTheDocument();
+  });
 });