fix: #4489 Disable weekNumber highlighting when no click handler is a…

…ssigned.
Hacker0x01 · Mar 18, 2024 · 740007b · 740007b
1 parent 87a9835
commit 740007b
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 6 deletions.
diff --git a/src/week_number.jsx b/src/week_number.jsx
@@ -116,10 +116,8 @@ export default class WeekNumber extends React.Component {
     const weekNumberClasses = {
       "react-datepicker__week-number": true,
       "react-datepicker__week-number--clickable": !!onClick,
-      "react-datepicker__week-number--selected": isSameDay(
-        this.props.date,
-        this.props.selected,
-      ),
+      "react-datepicker__week-number--selected":
+        !!onClick && isSameDay(this.props.date, this.props.selected),
       "react-datepicker__week-number--keyboard-selected":
         this.isKeyboardSelected(),
     };

diff --git a/test/week_number_test.test.js b/test/week_number_test.test.js
@@ -248,14 +248,15 @@ describe("WeekNumber", () => {
         ).toBe(true);
       });
 
-      it("should have the class 'react-datepicker__week-number--selected' if selected is current week and preselected is also current week", () => {
+      it("should have the class 'react-datepicker__week-number--selected' if selected is current week and preselected is also current week and has the onClick Props", () => {
         const currentWeekNumber = utils.newDate("2023-10-22T13:09:53+02:00");
         const { container } = render(
           <WeekNumber
             weekNumber={1}
             date={currentWeekNumber}
             selected={currentWeekNumber}
             preSelection={currentWeekNumber}
+            onClick={() => {}}
           />,
         );
         expect(
@@ -265,7 +266,24 @@ describe("WeekNumber", () => {
         ).toBe(true);
       });
 
-      it("should have the class 'react-datepicker__week-number--selected' if selected is current week and preselected is not current week", () => {
+      it("should not have the class 'react-datepicker__week-number--selected' if selected is current week and preselected is also current week and doesn't have the onClick Props", () => {
+        const currentWeekNumber = utils.newDate("2023-10-22T13:09:53+02:00");
+        const { container } = render(
+          <WeekNumber
+            weekNumber={1}
+            date={currentWeekNumber}
+            selected={currentWeekNumber}
+            preSelection={currentWeekNumber}
+          />,
+        );
+        expect(
+          container
+            .querySelector(".react-datepicker__week-number")
+            .classList.contains("react-datepicker__week-number--selected"),
+        ).toBe(false);
+      });
+
+      it("should have the class 'react-datepicker__week-number--selected' if selected is current week and preselected is not current week and has the onClick Props", () => {
         const currentWeekNumber = utils.newDate("2023-10-22T13:09:53+02:00");
         const preSelection = utils.addWeeks(currentWeekNumber, 1);
         const { container } = render(
@@ -274,6 +292,7 @@ describe("WeekNumber", () => {
             date={currentWeekNumber}
             selected={currentWeekNumber}
             preSelection={preSelection}
+            onClick={() => {}}
           />,
         );
         expect(
@@ -283,6 +302,24 @@ describe("WeekNumber", () => {
         ).toBe(true);
       });
 
+      it("should not have the class 'react-datepicker__week-number--selected' if selected is current week and preselected is not current week and doesn't have onClick Props", () => {
+        const currentWeekNumber = utils.newDate("2023-10-22T13:09:53+02:00");
+        const preSelection = utils.addWeeks(currentWeekNumber, 1);
+        const { container } = render(
+          <WeekNumber
+            weekNumber={1}
+            date={currentWeekNumber}
+            selected={currentWeekNumber}
+            preSelection={preSelection}
+          />,
+        );
+        expect(
+          container
+            .querySelector(".react-datepicker__week-number")
+            .classList.contains("react-datepicker__week-number--selected"),
+        ).toBe(false);
+      });
+
       it("should have the class 'react-datepicker__week-number--selected' if selected is not current week and preselected is current week", () => {
         const currentWeekNumber = utils.newDate("2023-10-22T13:09:53+02:00");
         const selected = utils.addWeeks(currentWeekNumber, 1);