Fix/33006

src/components/DatePicker/CalendarPicker/index.js

@@ -112,14 +112,44 @@ class CalendarPicker extends React.PureComponent {
      * Handles the user pressing the previous month arrow of the calendar picker.
      */
     moveToPrevMonth() {
-        this.setState((prev) => ({currentDateView: subMonths(new Date(prev.currentDateView), 1)}));
+        this.setState((prev) => {
+            const prevMonth = subMonths(new Date(prev.currentDateView), 1);
+            // if year is subtracted, we need to update the years list
+            let newYears = prev.years;
+            if (prevMonth.getFullYear() < prev.currentDateView.getFullYear()) {
+                newYears = _.map(prev.years, (item) => ({
+                    ...item,
+                    isSelected: item.value === prevMonth.getFullYear(),
+                }));
+            }
+
+            return {
+                currentDateView: prevMonth,
+                years: newYears,
+            };
+        });
     }
 
     /**
      * Handles the user pressing the next month arrow of the calendar picker.
      */
     moveToNextMonth() {
-        this.setState((prev) => ({currentDateView: addMonths(new Date(prev.currentDateView), 1)}));
+        this.setState((prev) => {
+            const nextMonth = addMonths(new Date(prev.currentDateView), 1);
+            // if year is added, we need to update the years list
+            let newYears = prev.years;
+            if (nextMonth.getFullYear() > prev.currentDateView.getFullYear()) {
+                newYears = _.map(prev.years, (item) => ({
+                    ...item,
+                    isSelected: item.value === nextMonth.getFullYear(),
+                }));
+            }
+
+            return {
+                currentDateView: nextMonth,
+                years: newYears,
+            };
+        });
     }
 
     render() {