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(
+ ,
+ );
+
+ 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(
+ ,
+ );
+
+ 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(
,
@@ -470,7 +512,11 @@ describe("DatePicker", () => {
it("should apply the react-datepicker-ignore-onclickoutside class to calendar icon when open", () => {
const { container } = render(
- ,
+ ,
);
let calendarIcon = container.querySelector(