Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,16 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
) {
this.setState({ monthSelectedIn: 0 });
}
if (this.props.selectsRange && this.state.monthSelectedIn !== 0) {
// Reset monthSelectedIn when calendar opens for range selection
// This ensures startDate is displayed as the first month when reopening
// (Fix for #5939), but we don't reset during active selection to avoid
// the view jumping when clicking dates in the second calendar (Fix for #5275)
if (
this.props.selectsRange &&
prevState.open === false &&
this.state.open === true &&
this.state.monthSelectedIn !== 0
) {
this.setState({ monthSelectedIn: 0 });
}
if (prevProps.highlightDates !== this.props.highlightDates) {
Expand Down
42 changes: 36 additions & 6 deletions src/test/datepicker_test.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2922,37 +2922,67 @@ describe("DatePicker", () => {
expect(instance!.state.monthSelectedIn).toEqual(0);
});

it("should set monthSelectedIn to 0 when selectsRange is true", () => {
it("should set monthSelectedIn to 0 when calendar opens with selectsRange", () => {
let instance: DatePicker | null = null;
const { rerender } = render(
const { container } = render(
<DatePicker
ref={(node) => {
instance = node;
}}
monthsShown={2}
inline
selectsRange
/>,
);
expect(instance).toBeTruthy();

// Manually set monthSelectedIn to 1 (simulating previous user interaction)
act(() => {
(
instance!.state as unknown as { monthSelectedIn: number }
).monthSelectedIn = 1;
});
expect(instance!.state.monthSelectedIn).toEqual(1);

rerender(
// Open the calendar by clicking the input
const input = container.querySelector("input");
expect(input).not.toBeNull();
fireEvent.click(input!);

// monthSelectedIn should be reset to 0 when the calendar opens
expect(instance!.state.monthSelectedIn).toEqual(0);
});

it("should NOT reset monthSelectedIn when selecting a date from second calendar with selectsRange", () => {
let instance: DatePicker | null = null;
const onChange = jest.fn();
const { container } = render(
<DatePicker
ref={(node) => {
instance = node;
}}
monthsShown={2}
inline
selectsRange
inline
onChange={onChange}
/>,
);
expect(instance).toBeTruthy();

expect(instance!.state.monthSelectedIn).toEqual(0);
// Find a day in the second month container
const secondMonthContainer = container.querySelectorAll(
".react-datepicker__month-container",
)[1];
expect(secondMonthContainer).toBeTruthy();
const secondMonthDays = secondMonthContainer?.querySelectorAll(
".react-datepicker__day:not(.react-datepicker__day--outside-month)",
);
expect(secondMonthDays?.length).toBeGreaterThan(0);

// Click a day in the second month
fireEvent.click(secondMonthDays![10]!);

// monthSelectedIn should be 1 (second calendar), not reset to 0
expect(instance!.state.monthSelectedIn).toEqual(1);
});

it("should disable non-jumping if prop focusSelectedMonth is true", () => {
Expand Down
Loading