Merge pull request #4257 from annadrg/fix-4023

fix: showPreviousMonths calendar jump

src/calendar.jsx

@@ -54,7 +54,7 @@ const DROPDOWN_FOCUS_CLASSNAMES = [
 const isDropdownSelect = (element = {}) => {
   const classNames = (element.className || "").split(/\s+/);
   return DROPDOWN_FOCUS_CLASSNAMES.some(
-    (testClassname) => classNames.indexOf(testClassname) >= 0
+    (testClassname) => classNames.indexOf(testClassname) >= 0,
   );
 };
 
@@ -63,7 +63,6 @@ export default class Calendar extends React.Component {
     return {
       onDropdownFocus: () => {},
       monthsShown: 1,
-      monthSelectedIn: 0,
       forceShowMonthNavigation: false,
       timeCaption: "Time",
       previousYearButtonLabel: "Previous Year",
@@ -98,7 +97,7 @@ export default class Calendar extends React.Component {
       PropTypes.shape({
         start: PropTypes.instanceOf(Date),
         end: PropTypes.instanceOf(Date),
-      })
+      }),
     ),
     filterDate: PropTypes.func,
     fixedHeight: PropTypes.bool,
@@ -110,7 +109,7 @@ export default class Calendar extends React.Component {
       PropTypes.shape({
         start: PropTypes.instanceOf(Date),
         end: PropTypes.instanceOf(Date),
-      })
+      }),
     ),
     includeTimes: PropTypes.array,
     injectTimes: PropTypes.array,
@@ -242,13 +241,13 @@ export default class Calendar extends React.Component {
     ) {
       const hasMonthChanged = !isSameMonth(
         this.state.date,
-        this.props.preSelection
+        this.props.preSelection,
       );
       this.setState(
         {
           date: this.props.preSelection,
         },
-        () => hasMonthChanged && this.handleCustomMonthChange(this.state.date)
+        () => hasMonthChanged && this.handleCustomMonthChange(this.state.date),
       );
     } else if (
       this.props.openToDate &&
@@ -297,7 +296,7 @@ export default class Calendar extends React.Component {
       ({ date }) => ({
         date: addMonths(date, 1),
       }),
-      () => this.handleMonthChange(this.state.date)
+      () => this.handleMonthChange(this.state.date),
     );
   };
 
@@ -306,7 +305,7 @@ export default class Calendar extends React.Component {
       ({ date }) => ({
         date: subMonths(date, 1),
       }),
-      () => this.handleMonthChange(this.state.date)
+      () => this.handleMonthChange(this.state.date),
     );
   };
 
@@ -382,7 +381,7 @@ export default class Calendar extends React.Component {
       ({ date }) => ({
         date: setYear(date, year),
       }),
-      () => this.handleYearChange(this.state.date)
+      () => this.handleYearChange(this.state.date),
     );
   };
 
@@ -391,7 +390,7 @@ export default class Calendar extends React.Component {
       ({ date }) => ({
         date: setMonth(date, month),
       }),
-      () => this.handleMonthChange(this.state.date)
+      () => this.handleMonthChange(this.state.date),
     );
   };
 
@@ -400,23 +399,23 @@ export default class Calendar extends React.Component {
       ({ date }) => ({
         date: setYear(setMonth(date, getMonth(monthYear)), getYear(monthYear)),
       }),
-      () => this.handleMonthYearChange(this.state.date)
+      () => this.handleMonthYearChange(this.state.date),
     );
   };
 
   header = (date = this.state.date) => {
     const startOfWeek = getStartOfWeek(
       date,
       this.props.locale,
-      this.props.calendarStartDay
+      this.props.calendarStartDay,
     );
 
     const dayNames = [];
     if (this.props.showWeekNumbers) {
       dayNames.push(
         <div key="W" className="react-datepicker__day-name">
           {this.props.weekLabel || "#"}
-        </div>
+        </div>,
       );
     }
     return dayNames.concat(
@@ -433,13 +432,13 @@ export default class Calendar extends React.Component {
             key={offset}
             className={classnames(
               "react-datepicker__day-name",
-              weekDayClassName
+              weekDayClassName,
             )}
           >
             {weekDayName}
           </div>
         );
-      })
+      }),
     );
   };
 
@@ -457,10 +456,10 @@ export default class Calendar extends React.Component {
       ({ date }) => ({
         date: subYears(
           date,
-          this.props.showYearPicker ? this.props.yearItemNumber : 1
+          this.props.showYearPicker ? this.props.yearItemNumber : 1,
         ),
       }),
-      () => this.handleYearChange(this.state.date)
+      () => this.handleYearChange(this.state.date),
     );
   };
 
@@ -558,10 +557,10 @@ export default class Calendar extends React.Component {
       ({ date }) => ({
         date: addYears(
           date,
-          this.props.showYearPicker ? this.props.yearItemNumber : 1
+          this.props.showYearPicker ? this.props.yearItemNumber : 1,
         ),
       }),
-      () => this.handleYearChange(this.state.date)
+      () => this.handleYearChange(this.state.date),
     );
   };
 
@@ -781,22 +780,22 @@ export default class Calendar extends React.Component {
 
     const prevMonthButtonDisabled = monthDisabledBefore(
       this.state.date,
-      this.props
+      this.props,
     );
 
     const nextMonthButtonDisabled = monthDisabledAfter(
       this.state.date,
-      this.props
+      this.props,
     );
 
     const prevYearButtonDisabled = yearDisabledBefore(
       this.state.date,
-      this.props
+      this.props,
     );
 
     const nextYearButtonDisabled = yearDisabledAfter(
       this.state.date,
-      this.props
+      this.props,
     );
 
     const showDayNames =
@@ -867,8 +866,9 @@ export default class Calendar extends React.Component {
       ? this.props.monthsShown - 1
       : 0;
     var fromMonthDate = subMonths(this.state.date, monthsToSubtract);
+    var monthSelectedIn = this.props.monthSelectedIn ?? monthsToSubtract;
     for (var i = 0; i < this.props.monthsShown; ++i) {
-      var monthsToAdd = i - this.props.monthSelectedIn;
+      var monthsToAdd = i - monthSelectedIn + monthsToSubtract;
       var monthDate = addMonths(fromMonthDate, monthsToAdd);
       var monthKey = `month-${i}`;
       var monthShowsDuplicateDaysEnd = i < this.props.monthsShown - 1;
@@ -946,7 +946,7 @@ export default class Calendar extends React.Component {
             monthShowsDuplicateDaysEnd={monthShowsDuplicateDaysEnd}
             monthShowsDuplicateDaysStart={monthShowsDuplicateDaysStart}
           />
-        </div>
+        </div>,
       );
     }
     return monthList;
@@ -1030,7 +1030,7 @@ export default class Calendar extends React.Component {
   renderAriaLiveRegion = () => {
     const { startPeriod, endPeriod } = getYearsPeriod(
       this.state.date,
-      this.props.yearItemNumber
+      this.props.yearItemNumber,
     );
     let ariaLiveMessage;
 
@@ -1044,7 +1044,7 @@ export default class Calendar extends React.Component {
     } else {
       ariaLiveMessage = `${getMonthInLocale(
         getMonth(this.state.date),
-        this.props.locale
+        this.props.locale,
       )} ${getYear(this.state.date)}`;
     }
 

test/calendar_test.test.js

@@ -197,6 +197,20 @@ describe("Calendar", () => {
     });
   });
 
+  it("should render the months correctly adjusted by monthSelectedIn for showPreviousMonths", () => {
+    const selected = utils.newDate("2018-11-19");
+    const calendar = getCalendar({
+      inline: true,
+      monthsShown: 2,
+      selected,
+      showPreviousMonths: true,
+    });
+    calendar.setProps({ monthSelectedIn: 1 }, () => {
+      const renderedMonths = calendar.find(Month);
+      expect(utils.getMonth(renderedMonths.first().prop("day"))).toEqual(9);
+    });
+  });
+
   it("should render the correct default aria labels for next and prev months buttons", () => {
     const calendar = getCalendar();
     const previousButtonAriaLabel = calendar