fix: selectDate not working with uncontrolled calendar and isDateUnavailable

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

@@ -501,6 +501,84 @@ describe('Calendar', () => {
     expect(cell).not.toHaveClass('selected');
   });
 
+  describe('selectDate', () => {
+    // Use a fixed date so the tests are deterministic regardless of the current date.
+    let focusedDate = new CalendarDate(2026, 4, 15);
+
+    let SelectDateExample = () => {
+      let state = useContext(CalendarStateContext);
+      return (
+        <ButtonContext.Provider value={null}>
+          <Button onPress={() => state.selectDate(focusedDate)}>Select focused</Button>
+          <Button onPress={() => state.selectDate(focusedDate.subtract({months: 1}))}>
+            Select one month before
+          </Button>
+          <Button onPress={() => state.selectDate(focusedDate.add({months: 1}))}>
+            Select one month after
+          </Button>
+          <span data-testid="selected-value">{state.value ? state.value.toString() : 'none'}</span>
+        </ButtonContext.Provider>
+      );
+    };
+
+    it('selects a date before the visible range when isDateUnavailable is provided', async () => {
+      let {getByRole, getAllByRole, getByTestId} = render(
+        <Calendar
+          aria-label="Appointment date"
+          defaultFocusedValue={focusedDate}
+          isDateUnavailable={() => false}>
+          <header>
+            <Button slot="previous">◀</Button>
+            <CalendarHeading />
+            <Button slot="next">▶</Button>
+          </header>
+          <CalendarGrid>{date => <CalendarCell date={date} />}</CalendarGrid>
+          <SelectDateExample />
+        </Calendar>
+      );
+
+      // Navigate to the next month so the focused date is before the visible range.
+      await user.click(getAllByRole('button', {name: 'Next'})[0]);
+
+      // Selecting a date before the visible range should still work.
+      await user.click(getByRole('button', {name: 'Select focused'}));
+      expect(getByTestId('selected-value')).toHaveTextContent(focusedDate.toString());
+
+      await user.click(getByRole('button', {name: 'Select one month before'}));
+      expect(getByTestId('selected-value')).toHaveTextContent(
+        focusedDate.subtract({months: 1}).toString()
+      );
+    });
+
+    it('selects a date after the visible range when isDateUnavailable is provided', async () => {
+      let {getByRole, getByTestId} = render(
+        <Calendar
+          aria-label="Appointment date"
+          defaultFocusedValue={focusedDate}
+          isDateUnavailable={() => false}>
+          <header>
+            <Button slot="previous">◀</Button>
+            <CalendarHeading />
+            <Button slot="next">▶</Button>
+          </header>
+          <CalendarGrid>{date => <CalendarCell date={date} />}</CalendarGrid>
+          <SelectDateExample />
+        </Calendar>
+      );
+
+      // Navigate to the previous month so the focused date is after the visible range.
+      await user.click(getByRole('button', {name: 'Previous'}));
+
+      await user.click(getByRole('button', {name: 'Select focused'}));
+      expect(getByTestId('selected-value')).toHaveTextContent(focusedDate.toString());
+
+      await user.click(getByRole('button', {name: 'Select one month after'}));
+      expect(getByTestId('selected-value')).toHaveTextContent(
+        focusedDate.add({months: 1}).toString()
+      );
+    });
+  });
+
   it('should not modify selection when trying to select an unavailable date by keyboard', async () => {
     let calendar = renderCalendar({isDateUnavailable: d => d.day === 15});
     let day16 = calendar.getByText('16');

packages/react-stately/src/calendar/useCalendarState.ts

@@ -230,7 +230,8 @@ export function useCalendarState<
 
   function normalizeValue(newValue: CalendarDate) {
     let constrained = constrainValue(newValue, minValue, maxValue);
-    let prev = previousAvailableDate(constrained, startDate, isDateUnavailable);
+    let lowerBound = minValue ?? constrained;
+    let prev = previousAvailableDate(constrained, lowerBound, isDateUnavailable);
     if (!prev) {
       return null;
     }

packages/react-stately/test/calendar/useCalendarState.test.ts

@@ -0,0 +1,71 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {actHook as act, renderHook} from '@react-spectrum/test-utils-internal';
+import {CalendarDate, createCalendar} from '@internationalized/date';
+import {useCalendarState} from '../../src/calendar/useCalendarState';
+
+describe('useCalendarState', () => {
+  describe('selectDate', () => {
+    // https://github.com/adobe/react-spectrum/issues/7779
+    let selectedDate = new CalendarDate(2026, 4, 15);
+
+    it('selects a date before the visible range when isDateUnavailable is provided', () => {
+      let {result} = renderHook(() =>
+        useCalendarState({
+          locale: 'en-US',
+          createCalendar,
+          isDateUnavailable: () => false,
+          defaultFocusedValue: selectedDate
+        })
+      );
+
+      // Navigate to the next month so the selected date is before the visible range.
+      act(() => {
+        result.current.focusNextPage();
+      });
+      expect(result.current.visibleRange.start.compare(selectedDate)).toBeGreaterThan(0);
+
+      // Selecting a date before the visible range should still work.
+      act(() => {
+        result.current.selectDate(selectedDate);
+      });
+
+      expect(result.current.value).not.toBeNull();
+      expect(result.current.value!.compare(selectedDate)).toBe(0);
+    });
+
+    it('selects a date after the visible range when isDateUnavailable is provided', () => {
+      let {result} = renderHook(() =>
+        useCalendarState({
+          locale: 'en-US',
+          createCalendar,
+          isDateUnavailable: () => false,
+          defaultFocusedValue: selectedDate
+        })
+      );
+
+      // Navigate to the previous month so the selected date is after the visible range.
+      act(() => {
+        result.current.focusPreviousPage();
+      });
+      expect(result.current.visibleRange.end.compare(selectedDate)).toBeLessThan(0);
+
+      act(() => {
+        result.current.selectDate(selectedDate);
+      });
+
+      expect(result.current.value).not.toBeNull();
+      expect(result.current.value!.compare(selectedDate)).toBe(0);
+    });
+  });
+});