Repository: Hacker0x01/react-datepicker (ts)

Issue:
Week number is highlighted when selecting the first day of the week
**Describe the bug**
Week number gets highlighted when selecting the first day of the week, but not when selecting any other day of the week.

**To Reproduce**
1) Click on the first day of the week.
![image](https://github.com/Hacker0x01/react-datepicker/assets/9450980/e830771b-0234-4b55-b18f-89702cd8b20f)

2) Click on any other day of the week (same or other)
![image](https://github.com/Hacker0x01/react-datepicker/assets/9450980/a41ce8fe-e25a-49f7-8f57-332776a09333)

**Expected behavior**
Week number gets highlighted for both cases or only when a range is selected - I am not 100% sure on what is the agreed behaviour, but current one seemed very odd to me.

Desktop

- OS: Windows 10
- Browser: Chrome
- Version: 121.0.6167.139 (Official Build) (64-bit)

**Where to test?**

Codepen:
https://codepen.io/MaertHaekkinen/pen/ExMQrMq

OR

https://reactdatepicker.com/ - "Display Week Numbers"

Pull request description:
fix: #4489 Disable weekNumber highlighting when no click handler is assigned.
## Description
**Linked issue**: close #4489

**Problem**
See issue #4489

**Changes**
Disable weekNumber highlighting when no click handler is assigned.

## Screenshots
<!-- If applicable, add screenshots to help explain your improvements -->

## To reviewers
<!-- Additional comments for reviewers -->

## Contribution checklist
- [x] I have followed the [contributing guidelines](https://github.com/Hacker0x01/react-datepicker/blob/main/CONTRIBUTING.md).
- [x] I have added sufficient test coverage for my changes.
- [x] I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.


Patch:
diff --git a/src/week_number.jsx b/src/week_number.jsx
index b5a05789..2dc0c5af 100644
--- 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(),
     };


Test patch:
diff --git a/test/week_number_test.test.js b/test/week_number_test.test.js
index 0e738db9..26e3fe73 100644
--- a/test/week_number_test.test.js
+++ b/test/week_number_test.test.js
@@ -248,7 +248,7 @@ 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
@@ -256,6 +256,7 @@ describe("WeekNumber", () => {
             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);