Merge pull request #5524 from qburst/issue-5322/fix/selected-style-for-multi-year-picker

🐛🎨 Apply the `--selected` class for the YearPicker when the `selectsMultiple` is enabled

Author: martijnrusschen

src/test/year_picker_test.test.tsx

@@ -107,6 +107,47 @@ describe("YearPicker", () => {
     expect(year).toBe(getYear(date).toString());
   });
 
+  it("should has selected class applied for all the selectedDates when selectsMultiple is set", () => {
+    const selectedDates = [new Date("2025-01-01"), new Date("2026-01-01")];
+    const { container } = render(
+      <Year
+        selectsMultiple
+        selectedDates={selectedDates}
+        date={selectedDates[0]}
+        onYearMouseEnter={() => {}}
+        onYearMouseLeave={() => {}}
+      />,
+    );
+    const yearElements = Array.from(
+      container.querySelectorAll(".react-datepicker__year-text--selected"),
+    );
+
+    expect(yearElements.length).toBe(selectedDates.length);
+
+    const isSelectedDatesHighlighted = yearElements.every((yearElement) => {
+      const yearValue = yearElement?.textContent;
+      return selectedDates.some(
+        (selectedDate) => getYear(selectedDate).toString() === yearValue,
+      );
+    });
+    expect(isSelectedDatesHighlighted).toBe(true);
+  });
+
+  it("should not has selected class where there is no selectedDates when selectsMultiple is set", () => {
+    const { container } = render(
+      <Year
+        selectsMultiple
+        date={new Date()}
+        onYearMouseEnter={() => {}}
+        onYearMouseLeave={() => {}}
+      />,
+    );
+    const yearElements = Array.from(
+      container.querySelectorAll(".react-datepicker__year-text--selected"),
+    );
+    expect(yearElements.length).toBe(0);
+  });
+
   it("should have current year class when element of array equal of current year", () => {
     const date = new Date();
     const { container } = render(

src/year.tsx

@@ -38,6 +38,8 @@ interface YearProps
   ) => void;
   preSelection?: Date | null;
   setPreSelection?: (date?: Date | null) => void;
+  selectsMultiple?: boolean;
+  selectedDates?: Date[];
   selected?: Date | null;
   inline?: boolean;
   usePointerEvent?: boolean;
@@ -240,6 +242,15 @@ export default class Year extends Component<YearProps> {
     );
   };
 
+  isSelectedYear = (year: number) => {
+    const { selectsMultiple, selected, selectedDates } = this.props;
+
+    if (selectsMultiple) {
+      return selectedDates?.some((date) => year === getYear(date));
+    }
+    return !selected || year === getYear(selected);
+  };
+
   onYearClick = (
     event:
       | React.MouseEvent<HTMLDivElement, MouseEvent>
@@ -360,7 +371,6 @@ export default class Year extends Component<YearProps> {
       date,
       minDate,
       maxDate,
-      selected,
       excludeDates,
       includeDates,
       filterDate,
@@ -372,9 +382,7 @@ export default class Year extends Component<YearProps> {
       `react-datepicker__year-${y}`,
       date ? yearClassName?.(setYear(date, y)) : undefined,
       {
-        "react-datepicker__year-text--selected": selected
-          ? y === getYear(selected)
-          : undefined,
+        "react-datepicker__year-text--selected": this.isSelectedYear(y),
         "react-datepicker__year-text--disabled":
           (minDate || maxDate || excludeDates || includeDates || filterDate) &&
           isYearDisabled(y, this.props),