Fix find dom node warning (Hacker0x01#1898)

* setClickOutsideRef function to fix react warning

* onClickOutside usage unit tests

src/calendar.jsx

@@ -147,6 +147,8 @@ export default class Calendar extends React.Component {
   constructor(props) {
     super(props);
 
+    this.containerRef = React.createRef();
+
     this.state = {
       date: this.getDateInView(),
       selectingDate: null,
@@ -188,6 +190,10 @@ export default class Calendar extends React.Component {
     this.props.onClickOutside(event);
   };
 
+  setClickOutsideRef = () => {
+    return this.containerRef.current;
+  };
+
   handleDropdownFocus = event => {
     if (isDropdownSelect(event.target)) {
       this.props.onDropdownFocus();
@@ -704,19 +710,21 @@ export default class Calendar extends React.Component {
   render() {
     const Container = this.props.container || CalendarContainer;
     return (
-      <Container
-        className={classnames("react-datepicker", this.props.className, {
-          "react-datepicker--time-only": this.props.showTimeSelectOnly
-        })}
-      >
-        {this.renderPreviousButton()}
-        {this.renderNextButton()}
-        {this.renderMonths()}
-        {this.renderTodayButton()}
-        {this.renderTimeSection()}
-        {this.renderInputTimeSection()}
-        {this.props.children}
-      </Container>
+      <div ref={this.containerRef}>
+        <Container
+          className={classnames("react-datepicker", this.props.className, {
+            "react-datepicker--time-only": this.props.showTimeSelectOnly
+          })}
+        >
+          {this.renderPreviousButton()}
+          {this.renderNextButton()}
+          {this.renderMonths()}
+          {this.renderTodayButton()}
+          {this.renderTimeSection()}
+          {this.renderInputTimeSection()}
+          {this.props.children}
+        </Container>
+      </div>
     );
   }
 }

test/calendar_test.js

@@ -1155,4 +1155,30 @@ describe("Calendar", function() {
       assert.equal(utils.getYear(calendar.state.date), 1994);
     });
   });
+
+  describe("using click outside", () => {
+    const clickOutsideSpy = sinon.spy();
+    const calendar = mount(
+      <Calendar
+        dateFormat={DATE_FORMAT}
+        onSelect={() => {}}
+        onClickOutside={clickOutsideSpy}
+      />
+    );
+
+    const instance = calendar.instance();
+
+    it("calls onClickOutside prop when handles click outside", () => {
+      instance.handleClickOutside("__event__");
+
+      assert(clickOutsideSpy.calledWith("__event__"));
+    });
+
+    it("setClickOutsideRef function returns container ref", () => {
+      const ref = instance.setClickOutsideRef();
+
+      assert.isNotNull(ref);
+      assert.equal(ref, instance.containerRef.current);
+    });
+  });
 });