Makes open state controllable through props (Hacker0x01#1475)

Author: hudovisk

src/index.jsx

@@ -108,9 +108,11 @@ export default class DatePicker extends React.Component {
     onClickOutside: PropTypes.func,
     onChangeRaw: PropTypes.func,
     onFocus: PropTypes.func,
+    onInputClick: PropTypes.func,
     onKeyDown: PropTypes.func,
     onMonthChange: PropTypes.func,
     onYearChange: PropTypes.func,
+    open: PropTypes.bool,
     openToDate: PropTypes.object,
     peekNextMonth: PropTypes.bool,
     placeholderText: PropTypes.string,
@@ -171,6 +173,7 @@ export default class DatePicker extends React.Component {
       onFocus() {},
       onBlur() {},
       onKeyDown() {},
+      onInputClick() {},
       onSelect() {},
       onClickOutside() {},
       onMonthChange() {},
@@ -272,6 +275,11 @@ export default class DatePicker extends React.Component {
     });
   };
 
+  isCalendarOpen = () =>
+    this.props.open === undefined
+      ? this.state.open && !this.props.disabled && !this.props.readOnly
+      : this.props.open;
+
   handleFocus = event => {
     if (!this.state.preventFocus) {
       this.props.onFocus(event);
@@ -428,6 +436,8 @@ export default class DatePicker extends React.Component {
     if (!this.props.disabled && !this.props.readOnly) {
       this.setOpen(true);
     }
+
+    this.props.onInputClick();
   };
 
   onInputKeyDown = event => {
@@ -514,10 +524,7 @@ export default class DatePicker extends React.Component {
   };
 
   renderCalendar = () => {
-    if (
-      !this.props.inline &&
-      (!this.state.open || this.props.disabled || this.props.readOnly)
-    ) {
+    if (!this.props.inline && !this.isCalendarOpen()) {
       return null;
     }
     return (
@@ -674,9 +681,7 @@ export default class DatePicker extends React.Component {
     return (
       <PopperComponent
         className={this.props.popperClassName}
-        hidePopper={
-          !this.state.open || this.props.disabled || this.props.readOnly
-        }
+        hidePopper={!this.isCalendarOpen()}
         popperModifiers={this.props.popperModifiers}
         targetComponent={
           <div className="react-datepicker__input-container">

test/datepicker_test.js

@@ -1053,4 +1053,26 @@ describe("DatePicker", () => {
     datePicker.clear();
     expect(datePicker.state.inputValue).to.be.null;
   });
+  it("should not open when open is false and input is focused", () => {
+    var datePicker = TestUtils.renderIntoDocument(<DatePicker open={false} />);
+    var dateInput = datePicker.input;
+    TestUtils.Simulate.focus(ReactDOM.findDOMNode(dateInput));
+    expect(datePicker.calendar).to.not.exist;
+  });
+  it("should open when open is true", () => {
+    var datePicker = TestUtils.renderIntoDocument(<DatePicker open />);
+    expect(datePicker.calendar).to.exist;
+  });
+  it("should fire onInputClick when input is clicked", () => {
+    const onInputClickSpy = sinon.spy();
+    var datePicker = TestUtils.renderIntoDocument(
+      <DatePicker onInputClick={onInputClickSpy} />
+    );
+    var dateInput = datePicker.input;
+    TestUtils.Simulate.click(ReactDOM.findDOMNode(dateInput));
+    defer(() => {
+      assert(onInputClickSpy.calledOnce, "should fire onInputClick");
+      done();
+    });
+  });
 });