diff --git a/src/Calendar.spec.tsx b/src/Calendar.spec.tsx index 905e8d09..046ef755 100644 --- a/src/Calendar.spec.tsx +++ b/src/Calendar.spec.tsx @@ -707,6 +707,85 @@ describe('Calendar', () => { expect(onActiveStartDateChange).not.toHaveBeenCalled(); }); + + it('returns to start of range when range is completed', () => { + const onActiveStartDateChange = vi.fn(); + + const initialRange = new Date(2017, 0, 10); + + const { container } = render( + , + ); + + const nextMonthButton = container.querySelector( + 'button.react-calendar__navigation__next-button', + ) as HTMLButtonElement; + + act(() => { + nextMonthButton.click(); + }); + // Disregard the call on the above button click + onActiveStartDateChange.mockClear(); + + // First day not in the previous month + const firstDayTile = container.querySelector( + '.react-calendar__tile:not([react-calendar__month-view__days__day--weekend])', + ) as HTMLButtonElement; + + act(() => { + firstDayTile.click(); + }); + + expect(onActiveStartDateChange).toHaveBeenCalledWith( + expect.objectContaining({ + action: 'onChange', + activeStartDate: new Date(2017, 0, 1), + view: 'month', + }), + ); + }); + + it('does not change activeStartDate on range completion when goToRangeStartOnSelect is set to false', () => { + const onActiveStartDateChange = vi.fn(); + + const initialRange = new Date(2017, 0, 10); + + const { container } = render( + , + ); + + const nextMonthButton = container.querySelector( + 'button.react-calendar__navigation__next-button', + ) as HTMLButtonElement; + + act(() => { + nextMonthButton.click(); + }); + // Disregard the call on the above button click + onActiveStartDateChange.mockClear(); + + // First day not in the previous month + const firstDayTile = container.querySelector( + '.react-calendar__tile:not([react-calendar__month-view__days__day--weekend])', + ) as HTMLButtonElement; + + act(() => { + firstDayTile.click(); + }); + + expect(onActiveStartDateChange).not.toHaveBeenCalled(); + }); }); describe('handles view change properly', () => { diff --git a/src/Calendar.tsx b/src/Calendar.tsx index c7c5c435..8929eaf8 100644 --- a/src/Calendar.tsx +++ b/src/Calendar.tsx @@ -496,7 +496,7 @@ export default class Calendar extends Component { this.setState(nextState, () => { const args = { action: nextState.action, - activeStartDate: nextState.activeStartDate || this.activeStartDate, + activeStartDate: nextState.activeStartDate || prevArgs.activeStartDate, value: ('value' in nextState && nextState.value) || this.value, view: ('view' in nextState && nextState.view) || this.view, }; @@ -691,7 +691,7 @@ export default class Calendar extends Component { ...(this.props as CalendarPropsWithDefaults), value: nextValue, }) - : null; + : this.activeStartDate; event.persist();