Merge pull request #6103 from Hacker0x01/fix/issue-5275-multi-month-range-selection

fix: prevent month view jump when selecting from second calendar in range mode

Author: martijnrusschen

src/index.tsx

@@ -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) {

src/test/datepicker_test.test.tsx

@@ -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", () => {