Repository: Hacker0x01/react-datepicker (ts)

Issue:
Clear button is active when input has a date inside and it is disabled
**Describe the bug**
While having a selected date with isClearable and disabled, the clear button is active and if clicked removes the date.

**To Reproduce**
Steps to reproduce the behavior:

```
const [startDate, setStartDate] = useState(new Date());

<DatePicker
  selected={startDate}
  onChange={(date) => setStartDate(date)}
  isClearable={true}
  disabled
/>
```

**Expected behaviour**
The clear button should be not active.

**Screenshots**
![image](https://user-images.githubusercontent.com/7200930/105151184-53e33100-5b0e-11eb-9c3c-78ec4f27d753.png)


**Desktop (please complete the following information):**

- OS: Windows (latest)
- Browser Chome (latest)
- Version 3.4.1


Pull request:
Disable clear button when the component is disabled
Fixes #2680.

Before:

![Screenshot](https://github.com/Hacker0x01/react-datepicker/assets/26308880/404e11ed-e599-4b68-a2b1-21881da2c1fc)

Now:

![Screenshot](https://github.com/Hacker0x01/react-datepicker/assets/26308880/1cf46b4e-5769-4fb3-babe-5bd9f5b25845)

Patch:
diff --git a/src/index.jsx b/src/index.jsx
index 83367c45..8f150bf6 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -360,10 +360,10 @@ export default class DatePicker extends React.Component {
     this.props.openToDate
       ? this.props.openToDate
       : this.props.selectsEnd && this.props.startDate
-      ? this.props.startDate
-      : this.props.selectsStart && this.props.endDate
-      ? this.props.endDate
-      : newDate();
+        ? this.props.startDate
+        : this.props.selectsStart && this.props.endDate
+          ? this.props.endDate
+          : newDate();
 
   // Convert the date from string format to standard Date format
   modifyHolidays = () =>
@@ -384,8 +384,8 @@ export default class DatePicker extends React.Component {
       minDate && isBefore(defaultPreSelection, startOfDay(minDate))
         ? minDate
         : maxDate && isAfter(defaultPreSelection, endOfDay(maxDate))
-        ? maxDate
-        : defaultPreSelection;
+          ? maxDate
+          : defaultPreSelection;
     return {
       open: this.props.startOpen || false,
       preventFocus: false,
@@ -1175,14 +1175,14 @@ export default class DatePicker extends React.Component {
       typeof this.props.value === "string"
         ? this.props.value
         : typeof this.state.inputValue === "string"
-        ? this.state.inputValue
-        : this.props.selectsRange
-        ? safeDateRangeFormat(
-            this.props.startDate,
-            this.props.endDate,
-            this.props,
-          )
-        : safeDateFormat(this.props.selected, this.props);
+          ? this.state.inputValue
+          : this.props.selectsRange
+            ? safeDateRangeFormat(
+                this.props.startDate,
+                this.props.endDate,
+                this.props,
+              )
+            : safeDateFormat(this.props.selected, this.props);
 
     return React.cloneElement(customInput, {
       [customInputRef]: (input) => {
@@ -1216,6 +1216,7 @@ export default class DatePicker extends React.Component {
   renderClearButton = () => {
     const {
       isClearable,
+      disabled,
       selected,
       startDate,
       endDate,
@@ -1230,7 +1231,12 @@ export default class DatePicker extends React.Component {
       return (
         <button
           type="button"
-          className={`react-datepicker__close-icon ${clearButtonClassName}`.trim()}
+          className={classnames(
+            "react-datepicker__close-icon",
+            clearButtonClassName,
+            { "react-datepicker__close-icon--disabled": disabled },
+          )}
+          disabled={disabled}
           aria-label={ariaLabelClose}
           onClick={this.onClearClick}
           title={clearButtonTitle}
diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
index e02152cc..f7686511 100644
--- a/src/stylesheets/datepicker.scss
+++ b/src/stylesheets/datepicker.scss
@@ -663,6 +663,15 @@
     vertical-align: middle;
     content: "\00d7";
   }
+
+  &--disabled {
+    cursor: default;
+
+    &::after {
+      cursor: default;
+      background-color: $datepicker__muted-color;
+    }
+  }
 }
 
 .react-datepicker__today-button {


Test patch:
diff --git a/test/datepicker_test.test.js b/test/datepicker_test.test.js
index 9e0285df..6949e7cb 100644
--- a/test/datepicker_test.test.js
+++ b/test/datepicker_test.test.js
@@ -500,6 +500,23 @@ describe("DatePicker", () => {
     expect(datePicker.state.inputValue).toBeNull();
   });
 
+  it("should disable the clear button when the component is disabled", () => {
+    const onChange = jest.fn();
+    const { getByLabelText } = render(
+      <DatePicker
+        ariaLabelClose="clear"
+        disabled
+        selected={utils.newDate("2023-11-25")}
+        isClearable
+        onChange={onChange}
+      />,
+    );
+    const clearButton = getByLabelText("clear");
+    expect(clearButton).toHaveProperty("disabled", true);
+    fireEvent.click(clearButton);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
   it("should return focus to input when clear button is used", (done) => {
     var div = document.createElement("div");
     document.body.appendChild(div);