readOnly fix (Hacker0x01#1419)

docs-site/src/example_components.jsx

@@ -43,6 +43,7 @@ import CalendarContainer from "./examples/calendar_container";
 import Portal from "./examples/portal";
 import InlinePortal from "./examples/inline_portal";
 import RawChange from "./examples/raw_change";
+import ReadOnly from "./examples/read_only";
 import ShowTime from "./examples/show_time";
 import ShowTimeOnly from "./examples/show_time_only";
 import ExcludeTimes from "./examples/exclude_times";
@@ -160,6 +161,10 @@ export default class exampleComponents extends React.Component {
       title: "Disable keyboard navigation",
       component: <DisabledKeyboardNavigation />
     },
+    {
+      title: "Read only datepicker",
+      component: <ReadOnly />
+    },
     {
       title: "Clear datepicker input",
       component: <ClearInput />

docs-site/src/examples/read_only.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import DatePicker from "react-datepicker";
+
+export default class ReadOnly extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      startDate: null
+    };
+  }
+
+  handleChange = date => {
+    this.setState({
+      startDate: date
+    });
+  };
+
+  render() {
+    return (
+      <div className="row">
+        <pre className="column example__code">
+          <code className="jsx">
+            {"<DatePicker"}
+            <br />
+            {"  selected={this.state.startDate}"}
+            <br />
+            {"  onChange={this.handleChange}"}
+            <br />
+            <strong>{"  readOnly={true}"}</strong>
+            <br />
+            {'  placeholderText="This is readOnly"'} />
+          </code>
+        </pre>
+        <div className="column">
+          <DatePicker
+            selected={this.state.startDate}
+            onChange={this.handleChange}
+            placeholderText="This is readOnly"
+            readOnly
+          />
+        </div>
+      </div>
+    );
+  }
+}

src/index.jsx

@@ -175,6 +175,7 @@ export default class DatePicker extends React.Component {
       preventOpenOnFocus: false,
       onYearChange() {},
       monthsShown: 1,
+      readOnly: false,
       withPortal: false,
       shouldCloseOnSelect: true,
       showTimeSelect: false,
@@ -270,7 +271,7 @@ export default class DatePicker extends React.Component {
   handleFocus = event => {
     if (!this.state.preventFocus) {
       this.props.onFocus(event);
-      if (!this.props.preventOpenOnFocus) {
+      if (!this.props.preventOpenOnFocus && !this.props.readOnly) {
         this.setOpen(true);
       }
     }
@@ -420,7 +421,7 @@ export default class DatePicker extends React.Component {
   };
 
   onInputClick = () => {
-    if (!this.props.disabled) {
+    if (!this.props.disabled && !this.props.readOnly) {
       this.setOpen(true);
     }
   };
@@ -509,7 +510,10 @@ export default class DatePicker extends React.Component {
   };
 
   renderCalendar = () => {
-    if (!this.props.inline && (!this.state.open || this.props.disabled)) {
+    if (
+      !this.props.inline &&
+      (!this.state.open || this.props.disabled || this.props.readOnly)
+    ) {
       return null;
     }
     return (
@@ -663,7 +667,9 @@ export default class DatePicker extends React.Component {
     return (
       <PopperComponent
         className={this.props.popperClassName}
-        hidePopper={!this.state.open || this.props.disabled}
+        hidePopper={
+          !this.state.open || this.props.disabled || this.props.readOnly
+        }
         popperModifiers={this.props.popperModifiers}
         targetComponent={
           <div className="react-datepicker__input-container">

test/datepicker_test.js

@@ -187,6 +187,13 @@ describe("DatePicker", () => {
     expect(datePicker.state.open).to.be.false;
   });
 
+  it("should not set open state when it is readOnly and gets clicked", function() {
+    var datePicker = TestUtils.renderIntoDocument(<DatePicker readOnly />);
+    var dateInput = datePicker.input;
+    TestUtils.Simulate.click(ReactDOM.findDOMNode(dateInput));
+    expect(datePicker.state.open).to.be.false;
+  });
+
   it("should hide the calendar when clicking a day on the calendar", () => {
     var datePicker = TestUtils.renderIntoDocument(<DatePicker />);
     var dateInput = datePicker.input;