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(