Fix readonly range calendar behavior (#2903)

Author: devongovett

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

@@ -129,6 +129,11 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
     preventFocusOnPress: true,
     isDisabled,
     onPressStart(e) {
+      if (state.isReadOnly) {
+        state.setFocusedDate(date);
+        return;
+      }
+
       if ('highlightedRange' in state && !state.anchorDate && (e.pointerType === 'mouse' || e.pointerType === 'touch')) {
         // Allow dragging the start or end date of a range to modify it
         // rather than starting a new selection.
@@ -174,12 +179,16 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
     },
     onPress() {
       // For non-range selection, always select on press up.
-      if (!('anchorDate' in state)) {
+      if (!('anchorDate' in state) && !state.isReadOnly) {
         state.selectDate(date);
         state.setFocusedDate(date);
       }
     },
     onPressUp(e) {
+      if (state.isReadOnly) {
+        return;
+      }
+
       // If the user tapped quickly, the date won't be selected yet and the
       // timer will still be in progress. In this case, select the date on touch up.
       // Timer is cleared in onPressEnd.

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

@@ -839,6 +839,29 @@ describe('RangeCalendar', () => {
       expect(document.activeElement).toBe(cell);
     });
 
+    it('does not enter selection mode with the mouse on range end if isReadOnly', () => {
+      let {getAllByLabelText, getByText} = render(<RangeCalendar isReadOnly autoFocus defaultValue={{start: new CalendarDate(2019, 6, 10), end: new CalendarDate(2019, 6, 20)}} />);
+
+      let cell = getByText('10').parentElement;
+      expect(document.activeElement).toBe(cell);
+
+      // try to enter selection mode
+      act(() => userEvent.click(cell));
+      expect(document.activeElement).toBe(cell);
+
+      let selectedDates = getAllByLabelText('selected', {exact: false});
+      expect(selectedDates[0].textContent).toBe('10');
+      expect(selectedDates[selectedDates.length - 1].textContent).toBe('20');
+
+      cell = getByText('15').parentElement;
+      act(() => userEvent.click(cell));
+      expect(document.activeElement).toBe(cell);
+
+      selectedDates = getAllByLabelText('selected', {exact: false});
+      expect(selectedDates[0].textContent).toBe('10');
+      expect(selectedDates[selectedDates.length - 1].textContent).toBe('20');
+    });
+
     it.each`
       Name          | RangeCalendar    | props
       ${'v3'}       | ${RangeCalendar} | ${{isDisabled: true}}