From 102ef5b299f53d25bf7bd5222eed67fbe895ab9c Mon Sep 17 00:00:00 2001
From: Balaji Sridharan <balaji.sridharan@nyulangone.org>
Date: Mon, 18 Dec 2023 12:22:09 +0530
Subject: [PATCH] feature: Make the calendar icon of the calendar clickable

Make the calendar icon clickable that helps to toggle the open status of the calendar.  Added new test cases to validate the new feature and updated the existing test case of checking the calendar icon class to make the new feature.

Closes #4091
---
 src/calendar_icon.jsx        |  5 ++++-
 src/index.jsx                | 42 +++++++++++++++++++++++-------------
 test/calendar_icon.test.js   | 31 ++++++++++++++++++++++++++
 test/datepicker_test.test.js | 34 ++++++++++++++++++++++++++++-
 4 files changed, 95 insertions(+), 17 deletions(-)

diff --git a/src/calendar_icon.jsx b/src/calendar_icon.jsx
index 20961ce27..8583c8367 100644
--- a/src/calendar_icon.jsx
+++ b/src/calendar_icon.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const CalendarIcon = ({ icon, className = "" }) => {
+const CalendarIcon = ({ icon, className = "", onClick }) => {
   const defaultClass = "react-datepicker__calendar-icon";
 
   if (React.isValidElement(icon)) {
@@ -15,6 +15,7 @@ const CalendarIcon = ({ icon, className = "" }) => {
       <i
         className={`${defaultClass} ${icon} ${className}`}
         aria-hidden="true"
+        onClick={onClick}
       />
     );
   }
@@ -25,6 +26,7 @@ const CalendarIcon = ({ icon, className = "" }) => {
       className={`${defaultClass} ${className}`}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 448 512"
+      onClick={onClick}
     >
       <path d="M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z" />
     </svg>
@@ -34,6 +36,7 @@ const CalendarIcon = ({ icon, className = "" }) => {
 CalendarIcon.propTypes = {
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   className: PropTypes.string,
+  onClick: PropTypes.func,
 };
 
 export default CalendarIcon;
diff --git a/src/index.jsx b/src/index.jsx
index 8f150bf60..14b46b76d 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,
@@ -713,6 +713,10 @@ export default class DatePicker extends React.Component {
     }
   };
 
+  toggleCalendar = () => {
+    this.setOpen(!this.state.open);
+  };
+
   handleTimeChange = (time) => {
     const selected = this.props.selected
       ? this.props.selected
@@ -1175,14 +1179,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) => {
@@ -1250,6 +1254,8 @@ export default class DatePicker extends React.Component {
 
   renderInputContainer() {
     const { showIcon, icon, calendarIconClassname } = this.props;
+    const { open } = this.state;
+
     return (
       <div
         className={`react-datepicker__input-container${
@@ -1257,7 +1263,13 @@ export default class DatePicker extends React.Component {
         }`}
       >
         {showIcon && (
-          <CalendarIcon icon={icon} className={calendarIconClassname} />
+          <CalendarIcon
+            icon={icon}
+            className={`${calendarIconClassname} ${
+              open && "react-datepicker-ignore-onclickoutside"
+            }`}
+            onClick={this.toggleCalendar}
+          />
         )}
         {this.state.isRenderAriaLiveMessage && this.renderAriaLiveRegion()}
         {this.renderDateInput()}
diff --git a/test/calendar_icon.test.js b/test/calendar_icon.test.js
index d38dea762..b144ecc3d 100644
--- a/test/calendar_icon.test.js
+++ b/test/calendar_icon.test.js
@@ -1,5 +1,6 @@
 import React from "react";
 import { mount } from "enzyme";
+import { render, fireEvent } from "@testing-library/react";
 import CalendarIcon from "../src/calendar_icon";
 import { IconParkSolidApplication } from "./helper_components/calendar_icon";
 
@@ -12,6 +13,14 @@ afterAll(() => {
 });
 
 describe("CalendarIcon", () => {
+  let onClickMock;
+  beforeEach(() => {
+    onClickMock = jest.fn();
+  });
+  afterEach(() => {
+    onClickMock.mockClear();
+  });
+
   it("renders a custom SVG icon when provided", () => {
     const wrapper = mount(
       <CalendarIcon showIcon icon={<IconParkSolidApplication />} />,
@@ -30,4 +39,26 @@ describe("CalendarIcon", () => {
     const wrapper = mount(<CalendarIcon showIcon />);
     expect(wrapper.find("svg.react-datepicker__calendar-icon")).toHaveLength(1);
   });
+
+  it("should fire onClick event when the icon is clicked", () => {
+    const { container } = render(
+      <CalendarIcon showIcon onClick={onClickMock} />,
+    );
+
+    const icon = container.querySelector("svg.react-datepicker__calendar-icon");
+    fireEvent.click(icon);
+
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("should fire onClick event on the click of font-awesome icon when provided", () => {
+    const { container } = render(
+      <CalendarIcon showIcon icon="fa-example-icon" onClick={onClickMock} />,
+    );
+
+    const icon = container.querySelector("i.fa-example-icon");
+    fireEvent.click(icon);
+
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/test/datepicker_test.test.js b/test/datepicker_test.test.js
index 6949e7cb5..fb224a943 100644
--- a/test/datepicker_test.test.js
+++ b/test/datepicker_test.test.js
@@ -455,6 +455,38 @@ describe("DatePicker", () => {
     );
   });
 
+  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 />,
+    );
+
+    const calendarIcon = container.querySelector(
+      ".react-datepicker__calendar-icon",
+    );
+    expect(
+      calendarIcon.classList.contains("react-datepicker-ignore-onclickoutside"),
+    ).toBe(false);
+  });
+
+  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 />,
+    );
+
+    let calendarIcon = container.querySelector(
+      "svg.react-datepicker__calendar-icon",
+    );
+    fireEvent.click(calendarIcon);
+
+    calendarIcon = container.querySelector(
+      "svg.react-datepicker__calendar-icon",
+    );
+
+    expect(
+      calendarIcon.classList.contains("react-datepicker-ignore-onclickoutside"),
+    ).toBe(true);
+  });
+
   it("should set the type attribute on the clear button to button", () => {
     var datePicker = TestUtils.renderIntoDocument(
       <DatePicker selected={utils.newDate("2015-12-15")} isClearable />,
@@ -2301,7 +2333,7 @@ describe("DatePicker", () => {
       datePicker,
       "react-datepicker__calendar-icon",
     ).getAttribute("class");
-    expect(showIconClass).toMatch(/^react-datepicker__calendar-icon\s?$/);
+    expect(showIconClass).toContain("react-datepicker__calendar-icon");
   });
 
   describe("Year picker", () => {