diff --git a/packages/react-aria-components/test/Calendar.test.js b/packages/react-aria-components/test/Calendar.test.js index 4966edcb9af..cfb02e16fd1 100644 --- a/packages/react-aria-components/test/Calendar.test.js +++ b/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 ( + + + + + {state.value ? state.value.toString() : 'none'} + + ); + }; + + it('selects a date before the visible range when isDateUnavailable is provided', async () => { + let {getByRole, getAllByRole, getByTestId} = render( + false}> +
+ + + +
+ {date => } + +
+ ); + + // 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( + false}> +
+ + + +
+ {date => } + +
+ ); + + // 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'); diff --git a/packages/react-stately/src/calendar/useCalendarState.ts b/packages/react-stately/src/calendar/useCalendarState.ts index c5df20dbe91..ee6ba96232b 100644 --- a/packages/react-stately/src/calendar/useCalendarState.ts +++ b/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; } diff --git a/packages/react-stately/test/calendar/useCalendarState.test.ts b/packages/react-stately/test/calendar/useCalendarState.test.ts new file mode 100644 index 00000000000..030f0305f2f --- /dev/null +++ b/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); + }); + }); +});