From 79b15950e9b58b0f3a36704b4abf79b963ffb940 Mon Sep 17 00:00:00 2001
From: Balaji Sridharan <balaji.sridharan@nyulangone.org>
Date: Mon, 18 Dec 2023 15:14:00 +0530
Subject: [PATCH] feature: Toggle the open status of reactCalendar based on the
 prop toggleCalendarOnIconClick

Set the onClick to the <CalendarIcon /> component only when toggleCalendarOnIconClick is set

Closes #4091
---
 src/index.jsx                | 11 +++++++--
 test/datepicker_test.test.js | 48 +++++++++++++++++++++++++++++++++++-
 2 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/src/index.jsx b/src/index.jsx
index 14b46b76d..f0eac76ec 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -129,6 +129,7 @@ export default class DatePicker extends React.Component {
       excludeScrollbar: true,
       customTimeInput: null,
       calendarStartDay: undefined,
+      toggleCalendarOnIconClick: false,
     };
   }
 
@@ -183,6 +184,7 @@ export default class DatePicker extends React.Component {
     injectTimes: PropTypes.array,
     inline: PropTypes.bool,
     isClearable: PropTypes.bool,
+    toggleCalendarOnIconClick: PropTypes.func,
     showIcon: PropTypes.bool,
     icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     calendarIconClassname: PropTypes.string,
@@ -1253,7 +1255,8 @@ export default class DatePicker extends React.Component {
   };
 
   renderInputContainer() {
-    const { showIcon, icon, calendarIconClassname } = this.props;
+    const { showIcon, icon, calendarIconClassname, toggleCalendarOnIconClick } =
+      this.props;
     const { open } = this.state;
 
     return (
@@ -1268,7 +1271,11 @@ export default class DatePicker extends React.Component {
             className={`${calendarIconClassname} ${
               open && "react-datepicker-ignore-onclickoutside"
             }`}
-            onClick={this.toggleCalendar}
+            {...(toggleCalendarOnIconClick
+              ? {
+                  onClick: this.toggleCalendar,
+                }
+              : null)}
           />
         )}
         {this.state.isRenderAriaLiveMessage && this.renderAriaLiveRegion()}
diff --git a/test/datepicker_test.test.js b/test/datepicker_test.test.js
index fb224a943..e846097e9 100644
--- a/test/datepicker_test.test.js
+++ b/test/datepicker_test.test.js
@@ -455,6 +455,48 @@ describe("DatePicker", () => {
     );
   });
 
+  it("should toggle the open status of calendar on click of the icon when toggleCalendarOnIconClick is set to true", () => {
+    const { container } = render(
+      <DatePicker
+        selected={utils.newDate("2023-12-17")}
+        showIcon
+        toggleCalendarOnIconClick
+      />,
+    );
+
+    const calendarIcon = container.querySelector(
+      "svg.react-datepicker__calendar-icon",
+    );
+    fireEvent.click(calendarIcon);
+
+    const reactCalendar = container.querySelector(
+      "div.react-datepicker-popper .react-datepicker",
+    );
+
+    expect(reactCalendar).not.toBeNull();
+  });
+
+  it("should not toggle the open status of calendar on click of the icon if toggleCalendarOnIconClick is set to false", () => {
+    const { container } = render(
+      <DatePicker
+        selected={utils.newDate("2023-12-17")}
+        showIcon
+        toggleCalendarOnIconClick={false}
+      />,
+    );
+
+    const calendarIcon = container.querySelector(
+      "svg.react-datepicker__calendar-icon",
+    );
+    fireEvent.click(calendarIcon);
+
+    const reactCalendar = container.querySelector(
+      "div.react-datepicker-popper .react-datepicker",
+    );
+
+    expect(reactCalendar).toBeNull();
+  });
+
   it("should not apply the react-datepicker-ignore-onclickoutside class to calendar icon when closed", () => {
     const { container } = render(
       <DatePicker selected={utils.newDate("2023-12-17")} showIcon />,
@@ -470,7 +512,11 @@ describe("DatePicker", () => {
 
   it("should apply the react-datepicker-ignore-onclickoutside class to calendar icon when open", () => {
     const { container } = render(
-      <DatePicker selected={utils.newDate("2023-12-17")} showIcon />,
+      <DatePicker
+        selected={utils.newDate("2023-12-17")}
+        showIcon
+        toggleCalendarOnIconClick
+      />,
     );
 
     let calendarIcon = container.querySelector(