fix useRangeCalendar behavior while interacting outside

packages/@react-aria/calendar/src/useRangeCalendar.ts

@@ -36,37 +36,40 @@ export function useRangeCalendar<T extends DateValue>(props: AriaRangeCalendarPr
     isVirtualClick.current = e.width === 0 && e.height === 0;
   });
 
-  // Stop range selection when pressing or releasing a pointer outside the calendar body,
-  // except when pressing the next or previous buttons to switch months.
-  let endDragging = (e: PointerEvent) => {
-    if (isVirtualClick.current) {
-      isVirtualClick.current = false;
-      return;
-    }
-
-    state.setDragging(false);
+  // Cancel range selection when not releasing a pointer on a CalendarCell
+  useEvent(windowRef, 'pointerup', (e) => {
     if (!state.anchorDate) {
       return;
     }
 
     let target = e.target as Element;
-    let body = document.getElementById(res.calendarProps.id);
     if (
-      body &&
-      body.contains(document.activeElement) &&
-      (!body.contains(target) || !target.closest('button, [role="button"]'))
+      ref.current &&
+      ref.current.contains(document.activeElement) &&
+      (!ref.current.contains(target) ||
+        !target.closest('button, [role="button"]'))
     ) {
-      state.selectFocusedDate();
+      state.setAnchorDate(null);
     }
-  };
+  });
 
+  let endDragging = () => {
+    if (isVirtualClick.current) {
+      isVirtualClick.current = false;
+      return;
+    }
+    state.setDragging(false);
+  };
   useEvent(windowRef, 'pointerup', endDragging);
   useEvent(windowRef, 'pointercancel', endDragging);
 
-  // Also stop range selection on blur, e.g. tabbing away from the calendar.
+  // Cancel range selection on blur, e.g. tabbing away from the calendar.
   res.calendarProps.onBlur = e => {
-    if ((!e.relatedTarget || !ref.current.contains(e.relatedTarget)) && state.anchorDate) {
-      state.selectFocusedDate();
+    if (!state.anchorDate) {
+      return;
+    }
+    if (!e.relatedTarget || !ref.current.contains(e.relatedTarget)) {
+      state.setAnchorDate(null);
     }
   };
 

packages/@react-spectrum/calendar/test/RangeCalendar.test.js

@@ -561,7 +561,7 @@ describe('RangeCalendar', () => {
       expect(end).toEqual(new CalendarDate(2019, 6, 19));
     });
 
-    it('releasing drag outside calendar commits it', () => {
+    it('cancel ongoing selection when releasing drag outside calendar', () => {
       let onChange = jest.fn();
       let {getAllByLabelText, getByText} = render(<RangeCalendar onChange={onChange} defaultValue={{start: new CalendarDate(2019, 6, 10), end: new CalendarDate(2019, 6, 20)}} />);
 
@@ -582,13 +582,9 @@ describe('RangeCalendar', () => {
       fireEvent.pointerUp(document.body);
 
       selectedDates = getAllByLabelText('selected', {exact: false});
-      expect(selectedDates[0].textContent).toBe('22');
-      expect(selectedDates[selectedDates.length - 1].textContent).toBe('25');
-      expect(onChange).toHaveBeenCalledTimes(1);
-
-      let {start, end} = onChange.mock.calls[0][0];
-      expect(start).toEqual(new CalendarDate(2019, 6, 22));
-      expect(end).toEqual(new CalendarDate(2019, 6, 25));
+      expect(selectedDates[0].textContent).toBe('10');
+      expect(selectedDates[selectedDates.length - 1].textContent).toBe('20');
+      expect(onChange).toHaveBeenCalledTimes(0);
     });
 
     describe('touch', () => {
@@ -693,7 +689,7 @@ describe('RangeCalendar', () => {
       });
     });
 
-    it('clicking outside calendar commits selection', async () => {
+    it('cancel ongoing selection when clicking outside calendar', async () => {
       let onChange = jest.fn();
       let {getAllByLabelText, getByText} = render(<RangeCalendar onChange={onChange} defaultValue={{start: new CalendarDate(2019, 6, 10), end: new CalendarDate(2019, 6, 20)}} />);
 
@@ -714,13 +710,9 @@ describe('RangeCalendar', () => {
       await user.click(document.body);
 
       selectedDates = getAllByLabelText('selected', {exact: false});
-      expect(selectedDates[0].textContent).toBe('22');
-      expect(selectedDates[selectedDates.length - 1].textContent).toBe('25');
-      expect(onChange).toHaveBeenCalledTimes(1);
-
-      let {start, end} = onChange.mock.calls[0][0];
-      expect(start).toEqual(new CalendarDate(2019, 6, 22));
-      expect(end).toEqual(new CalendarDate(2019, 6, 25));
+      expect(selectedDates[0].textContent).toBe('10');
+      expect(selectedDates[selectedDates.length - 1].textContent).toBe('20');
+      expect(onChange).toHaveBeenCalledTimes(0);
     });
 
     it('clicking on next/previous buttons does not commit selection', async () => {
@@ -1210,7 +1202,7 @@ describe('RangeCalendar', () => {
       expect(getByRole('button', {name: 'Sunday, December 5, 2021'}).parentElement).not.toHaveAttribute('aria-selected', 'true');
     });
 
-    it('selects the nearest available date when blurring the calendar', async () => {
+    it('cancel ongoing selection when blurring the calendar', async () => {
       let onChange = jest.fn();
       function Example() {
         let {locale} = useLocale();
@@ -1238,7 +1230,7 @@ describe('RangeCalendar', () => {
 
       act(() => cell.blur());
 
-      expect(onChange).toHaveBeenCalledWith({start: new CalendarDate(2022, 3, 9), end: new CalendarDate(2022, 4, 8)});
+      expect(onChange).toHaveBeenCalledTimes(0);
     });
 
     it('should support invalid state', () => {