Fix use range calendar with mobile scrolling (#5976)

* remove redundant code

* fix type

* fix(useRangeCalendar): mobile scrolling range selection

* test cases

---------

Co-authored-by: Daniel Lu <dl1644@gmail.com>

Author: QzCurious

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

@@ -50,21 +50,22 @@ export function useRangeCalendar<T extends DateValue>(props: AriaRangeCalendarPr
     }
 
     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();
     }
   };
 
   useEvent(windowRef, 'pointerup', endDragging);
-  useEvent(windowRef, 'pointercancel', endDragging);
 
   // Also stop range selection on blur, e.g. tabbing away from the calendar.
   res.calendarProps.onBlur = e => {
+    if (!ref.current) {
+      return;
+    }
     if ((!e.relatedTarget || !ref.current.contains(e.relatedTarget)) && state.anchorDate) {
       state.selectFocusedDate();
     }

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

@@ -28,6 +28,7 @@ function type(key) {
 }
 
 describe('RangeCalendar', () => {
+  /** @type {ReturnType<typeof userEvent['setup']>} */
   let user;
   beforeAll(() => {
     user = userEvent.setup({delay: null, pointerMap});
@@ -691,6 +692,154 @@ describe('RangeCalendar', () => {
         expect(start).toEqual(new CalendarDate(2019, 6, 15));
         expect(end).toEqual(new CalendarDate(2019, 6, 20));
       });
+
+      it('allow touch-scroll thought calendar by onto a day and then finalize selection', async () => {
+        let onChange = jest.fn();
+
+        let {getAllByLabelText, getByText} = render(
+          <RangeCalendar
+            defaultValue={{
+              start: new CalendarDate(2019, 6, 15),
+              end: new CalendarDate(2019, 6, 20)
+            }}
+            onChange={onChange} />
+        );
+
+        // start a range selection
+        await user.click(getByText('23'));
+        let selectedDates = getAllByLabelText('selected', {exact: false});
+        expect(selectedDates[0].textContent).toBe('23');
+        expect(selectedDates[selectedDates.length - 1].textContent).toBe('23');
+        expect(onChange).toHaveBeenCalledTimes(0);
+
+        // scroll through the calendar
+        // simulate touch scroll by touch-move on a day
+        let dayEl = getByText('10');
+        fireEvent.pointerDown(dayEl, {pointerType: 'touch'});
+        fireEvent.pointerCancel(dayEl, {pointerType: 'touch'});
+
+        // finalize selection
+        await user.click(getByText('25'));
+        selectedDates = getAllByLabelText('selected', {exact: false});
+        expect(selectedDates[0].textContent).toBe('23');
+        expect(selectedDates[selectedDates.length - 1].textContent).toBe('25');
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledWith({
+          start: new CalendarDate(2019, 6, 23),
+          end: new CalendarDate(2019, 6, 25)
+        });
+      });
+
+      it('allow touch-scroll thought calendar by onto a disabled day and then finalize selection', async () => {
+        let onChange = jest.fn();
+
+        let {getAllByLabelText, getByText} = render(
+          <RangeCalendar
+            defaultValue={{
+              start: new CalendarDate(2019, 6, 15),
+              end: new CalendarDate(2019, 6, 20)
+            }}
+            onChange={onChange} />
+        );
+
+        // start a range selection
+        await user.click(getByText('23'));
+        let selectedDates = getAllByLabelText('selected', {exact: false});
+        expect(selectedDates[0].textContent).toBe('23');
+        expect(selectedDates[selectedDates.length - 1].textContent).toBe('23');
+        expect(onChange).toHaveBeenCalledTimes(0);
+
+        // scroll through the calendar
+        // simulate touch scroll by touch-move on a disabled day (May 31)
+        let disabledDayEl = getByText('31');
+        fireEvent.pointerDown(disabledDayEl, {pointerType: 'touch'});
+        fireEvent.pointerCancel(disabledDayEl, {pointerType: 'touch'});
+
+        // finalize selection
+        await user.click(getByText('25'));
+        selectedDates = getAllByLabelText('selected', {exact: false});
+        expect(selectedDates[0].textContent).toBe('23');
+        expect(selectedDates[selectedDates.length - 1].textContent).toBe('25');
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledWith({
+          start: new CalendarDate(2019, 6, 23),
+          end: new CalendarDate(2019, 6, 25)
+        });
+      });
+
+      it('allow touch-scroll thought calendar by onto a weekday and then finalize selection', async () => {
+        let onChange = jest.fn();
+
+        let {getAllByLabelText, getByText} = render(
+          <RangeCalendar
+            defaultValue={{
+              start: new CalendarDate(2019, 6, 15),
+              end: new CalendarDate(2019, 6, 20)
+            }}
+            onChange={onChange} />
+        );
+
+        // start a range selection
+        await user.click(getByText('23'));
+        let selectedDates = getAllByLabelText('selected', {exact: false});
+        expect(selectedDates[0].textContent).toBe('23');
+        expect(selectedDates[selectedDates.length - 1].textContent).toBe('23');
+        expect(onChange).toHaveBeenCalledTimes(0);
+
+        // scroll through the calendar
+        // simulate touch scroll by touch-move on a weekday
+        let weekdayEl = getByText('M');
+        fireEvent.pointerDown(weekdayEl, {pointerType: 'touch'});
+        fireEvent.pointerCancel(weekdayEl, {pointerType: 'touch'});
+
+        // finalize selection
+        await user.click(getByText('25'));
+        selectedDates = getAllByLabelText('selected', {exact: false});
+        expect(selectedDates[0].textContent).toBe('23');
+        expect(selectedDates[selectedDates.length - 1].textContent).toBe('25');
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledWith({
+          start: new CalendarDate(2019, 6, 23),
+          end: new CalendarDate(2019, 6, 25)
+        });
+      });
+
+      it('allow touch-scroll thought calendar by onto a heading and then finalize selection', async () => {
+        let onChange = jest.fn();
+
+        let {getAllByLabelText, getByText, getByRole} = render(
+          <RangeCalendar
+            defaultValue={{
+              start: new CalendarDate(2019, 6, 15),
+              end: new CalendarDate(2019, 6, 20)
+            }}
+            onChange={onChange} />
+        );
+
+        // start a range selection
+        await user.click(getByText('23'));
+        let selectedDates = getAllByLabelText('selected', {exact: false});
+        expect(selectedDates[0].textContent).toBe('23');
+        expect(selectedDates[selectedDates.length - 1].textContent).toBe('23');
+        expect(onChange).toHaveBeenCalledTimes(0);
+
+        // scroll through the calendar
+        // simulate touch scroll by touch-move on heading
+        let headingEl = getByRole('heading');
+        fireEvent.pointerDown(headingEl, {pointerType: 'touch'});
+        fireEvent.pointerCancel(headingEl, {pointerType: 'touch'});
+
+        // finalize selection
+        await user.click(getByText('25'));
+        selectedDates = getAllByLabelText('selected', {exact: false});
+        expect(selectedDates[0].textContent).toBe('23');
+        expect(selectedDates[selectedDates.length - 1].textContent).toBe('25');
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledWith({
+          start: new CalendarDate(2019, 6, 23),
+          end: new CalendarDate(2019, 6, 25)
+        });
+      });
     });
 
     it('clicking outside calendar commits selection', async () => {