feature: Toggle the open status of reactCalendar based on the prop to…

…ggleCalendarOnIconClick Set the onClick to the <CalendarIcon /> component only when toggleCalendarOnIconClick is set Closes #4091
Hacker0x01 · Dec 18, 2023 · 79b1595 · 79b1595
1 parent 210fcd5
commit 79b1595
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 3 deletions.
diff --git 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
@@ -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(