Use react-onclickoutside to close calendar, remove dependency on click and blur events

Author: hahahana

react-datepicker.js

@@ -1,10 +1,97 @@
 !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.DatePicker=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/**
+ * A mixin for handling (effectively) onClickOutside for React components.
+ * Note that we're not intercepting any events in this approach, and we're
+ * not using double events for capturing and discarding in layers or wrappers.
+ *
+ * The idea is that components define function
+ *
+ *   onClickOutside: function() { ... }
+ *
+ * If no such function is defined, an error will be thrown, as this means
+ * either it still needs to be written, or the component should not be using
+ * this mixing since it will not exhibit onClickOutside behaviour.
+ *
+ */
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define([], factory);
+  } else if (typeof exports === 'object') {
+    // Node. Note that this does not work with strict
+    // CommonJS, but only CommonJS-like environments
+    // that support module.exports
+    module.exports = factory();
+  } else {
+    // Browser globals (root is window)
+    root.OnClickOutside = factory();
+  }
+}(this, function () {
+  "use strict";
+
+  // Use a parallel array because we can't use
+  // objects as keys, they get toString-coerced
+  var registeredComponents = [];
+  var handlers = [];
+
+  return {
+    componentDidMount: function() {
+      if(!this.handleClickOutside)
+        throw new Error("Component lacks a handleClickOutside(event) function for processing outside click events.");
+
+      var fn = (function(localNode, eventHandler) {
+        return function(evt) {
+          var source = evt.target;
+          var found = false;
+          // If source=local then this event came from "somewhere"
+          // inside and should be ignored. We could handle this with
+          // a layered approach, too, but that requires going back to
+          // thinking in terms of Dom node nesting, running counter
+          // to React's "you shouldn't care about the DOM" philosophy.
+          while(source.parentNode) {
+            found = (source === localNode);
+            if(found) return;
+            source = source.parentNode;
+          }
+          eventHandler(evt);
+        }
+      }(this.getDOMNode(), this.handleClickOutside));
+
+      document.addEventListener("mousedown", fn);
+      document.addEventListener("touchstart", fn);
+
+      var pos = registeredComponents.length;
+      registeredComponents.push(this);
+      handlers[pos] = fn;
+    },
+
+    componentWillUnmount: function() {
+      var pos = registeredComponents.indexOf(this);
+      if( pos>-1) {
+        var fn = handlers[pos];
+        if (fn) {
+          document.removeEventListener("mousedown", fn);
+          document.removeEventListener("touchstart", fn);
+        }
+      }
+    }
+  };
+
+}));
+
+},{}],2:[function(require,module,exports){
 /** @jsx React.DOM */
 
 var Day = require('./day');
 var DateUtil = require('./util/date');
 
 var Calendar = React.createClass({displayName: 'Calendar',
+  mixins: [require('react-onclickoutside')],
+
+  handleClickOutside: function() {
+    this.props.hideCalendar();
+  },
+
   getInitialState: function() {
     return {
       date: new DateUtil(this.props.selected).clone()
@@ -46,7 +133,7 @@ var Calendar = React.createClass({displayName: 'Calendar',
     }
 
     return (
-      React.DOM.div({key: key}, 
+      React.DOM.div({key: key},
         this.days(weekStart)
       )
     );
@@ -55,10 +142,10 @@ var Calendar = React.createClass({displayName: 'Calendar',
   renderDay: function(day, key) {
     return (
       Day({
-        key: key, 
-        day: day, 
-        date: this.state.date, 
-        onClick: this.handleDayClick.bind(this, day), 
+        key: key,
+        day: day,
+        date: this.state.date,
+        onClick: this.handleDayClick.bind(this, day),
         selected: new DateUtil(this.props.selected)})
     );
   },
@@ -69,29 +156,29 @@ var Calendar = React.createClass({displayName: 'Calendar',
 
   render: function() {
     return (
-      React.DOM.div({className: "datepicker", onMouseDown: this.props.onMouseDown}, 
-        React.DOM.div({className: "datepicker__triangle"}), 
-        React.DOM.div({className: "datepicker__header"}, 
-          React.DOM.a({className: "datepicker__navigation datepicker__navigation--previous", 
+      React.DOM.div({className: "datepicker"},
+        React.DOM.div({className: "datepicker__triangle"}),
+        React.DOM.div({className: "datepicker__header"},
+          React.DOM.a({className: "datepicker__navigation datepicker__navigation--previous",
               onClick: this.decreaseMonth}
-          ), 
-          React.DOM.span({className: "datepicker__current-month"}, 
+          ),
+          React.DOM.span({className: "datepicker__current-month"},
             this.state.date.format("MMMM YYYY")
-          ), 
-          React.DOM.a({className: "datepicker__navigation datepicker__navigation--next", 
+          ),
+          React.DOM.a({className: "datepicker__navigation datepicker__navigation--next",
               onClick: this.increaseMonth}
-          ), 
-          React.DOM.div(null, 
-            React.DOM.div({className: "datepicker__day"}, "Mo"), 
-            React.DOM.div({className: "datepicker__day"}, "Tu"), 
-            React.DOM.div({className: "datepicker__day"}, "We"), 
-            React.DOM.div({className: "datepicker__day"}, "Th"), 
-            React.DOM.div({className: "datepicker__day"}, "Fr"), 
-            React.DOM.div({className: "datepicker__day"}, "Sa"), 
+          ),
+          React.DOM.div(null,
+            React.DOM.div({className: "datepicker__day"}, "Mo"),
+            React.DOM.div({className: "datepicker__day"}, "Tu"),
+            React.DOM.div({className: "datepicker__day"}, "We"),
+            React.DOM.div({className: "datepicker__day"}, "Th"),
+            React.DOM.div({className: "datepicker__day"}, "Fr"),
+            React.DOM.div({className: "datepicker__day"}, "Sa"),
             React.DOM.div({className: "datepicker__day"}, "Su")
           )
-        ), 
-        React.DOM.div({className: "datepicker__month"}, 
+        ),
+        React.DOM.div({className: "datepicker__month"},
           this.weeks()
         )
       )
@@ -101,7 +188,7 @@ var Calendar = React.createClass({displayName: 'Calendar',
 
 module.exports = Calendar;
 
-},{"./day":4,"./util/date":6}],2:[function(require,module,exports){
+},{"./day":5,"./util/date":7,"react-onclickoutside":1}],3:[function(require,module,exports){
 /** @jsx React.DOM */
 
 var DateUtil = require('./util/date');
@@ -173,21 +260,20 @@ var DateInput = React.createClass({displayName: 'DateInput',
 
   render: function() {
     return React.DOM.input({
-      ref: "input", 
-      type: "text", 
-      value: this.state.value, 
-      onBlur: this.props.onBlur, 
-      onClick: this.handleClick, 
-      onKeyDown: this.handleKeyDown, 
-      onFocus: this.props.onFocus, 
-      onChange: this.handleChange, 
+      ref: "input",
+      type: "text",
+      value: this.state.value,
+      onClick: this.handleClick,
+      onKeyDown: this.handleKeyDown,
+      onFocus: this.props.onFocus,
+      onChange: this.handleChange,
       className: "datepicker__input"});
   }
 });
 
 module.exports = DateInput;
 
-},{"./util/date":6}],3:[function(require,module,exports){
+},{"./util/date":7}],4:[function(require,module,exports){
 /** @jsx React.DOM */
 
 var Popover   = require('./popover');
@@ -209,31 +295,11 @@ var DatePicker = React.createClass({displayName: 'DatePicker',
   },
 
   hideCalendar: function() {
-    this.setState({
-      focus: false
-    });
-  },
-
-  handleBlur: function() {
-    this.setState({
-      focus: !! this._shouldBeFocussed
-    });
-
-    if (!! this._shouldBeFocussed) {
-      // Firefox doesn't support immediately focussing inside of blur
-      setTimeout(function() {
-        this.setState({
-          focus: true
-        });
-      }.bind(this), 0);
-    }
-
-    // Reset the value of this._shouldBeFocussed to it's default
-    this._shouldBeFocussed = false;
-  },
-
-  handleCalendarMouseDown: function() {
-    this._shouldBeFocussed = true;
+    setTimeout(function() {
+      this.setState({
+        focus: false
+      });
+    }.bind(this), 0);
   },
 
   handleSelect: function(date) {
@@ -257,28 +323,27 @@ var DatePicker = React.createClass({displayName: 'DatePicker',
   calendar: function() {
     if (this.state.focus) {
       return (
-        Popover(null, 
+        Popover(null,
           Calendar({
-            selected: this.props.selected, 
-            onSelect: this.handleSelect, 
-            onMouseDown: this.handleCalendarMouseDown})
+            selected: this.props.selected,
+            onSelect: this.handleSelect,
+            hideCalendar: this.hideCalendar})
         )
       );
     }
   },
 
   render: function() {
     return (
-      React.DOM.div(null, 
+      React.DOM.div(null,
         DateInput({
-          date: this.props.selected, 
-          dateFormat: this.props.dateFormat, 
-          focus: this.state.focus, 
-          onBlur: this.handleBlur, 
-          onFocus: this.handleFocus, 
-          handleClick: this.onInputClick, 
-          handleEnter: this.hideCalendar, 
-          setSelected: this.setSelected}), 
+          date: this.props.selected,
+          dateFormat: this.props.dateFormat,
+          focus: this.state.focus,
+          onFocus: this.handleFocus,
+          handleClick: this.onInputClick,
+          handleEnter: this.hideCalendar,
+          setSelected: this.setSelected}),
         this.calendar()
       )
     );
@@ -287,7 +352,7 @@ var DatePicker = React.createClass({displayName: 'DatePicker',
 
 module.exports = DatePicker;
 
-},{"./calendar":1,"./date_input":2,"./popover":5,"./util/date":6}],4:[function(require,module,exports){
+},{"./calendar":2,"./date_input":3,"./popover":6,"./util/date":7}],5:[function(require,module,exports){
 /** @jsx React.DOM */
 
 var Day = React.createClass({displayName: 'Day',
@@ -300,7 +365,7 @@ var Day = React.createClass({displayName: 'Day',
     });
 
     return (
-      React.DOM.div({className: classes, onClick: this.props.onClick}, 
+      React.DOM.div({className: classes, onClick: this.props.onClick},
         this.props.day.day()
       )
     );
@@ -309,7 +374,7 @@ var Day = React.createClass({displayName: 'Day',
 
 module.exports = Day;
 
-},{}],5:[function(require,module,exports){
+},{}],6:[function(require,module,exports){
 /** @jsx React.DOM */
 
 var Popover = React.createClass({
@@ -335,8 +400,8 @@ var Popover = React.createClass({
   _popoverComponent: function() {
     var className = this.props.className;
     return (
-      React.DOM.div({className: className}, 
-        React.DOM.div({className: "datepicker-popover-content"}, 
+      React.DOM.div({className: className},
+        React.DOM.div({className: "datepicker-popover-content"},
           this.props.children
         )
       )
@@ -387,7 +452,7 @@ var Popover = React.createClass({
 
 module.exports = Popover;
 
-},{}],6:[function(require,module,exports){
+},{}],7:[function(require,module,exports){
 function DateUtil(date) {
   this._date = date;
 }
@@ -460,5 +525,5 @@ DateUtil.prototype.moment = function() {
 
 module.exports = DateUtil;
 
-},{}]},{},[3])(3)
-});
+},{}]},{},[4])(4)
+});

src/calendar.js

@@ -4,6 +4,12 @@ var Day = require('./day');
 var DateUtil = require('./util/date');
 
 var Calendar = React.createClass({
+  mixins: [require('react-onclickoutside')],
+
+  handleClickOutside: function() {
+    this.props.hideCalendar();
+  },
+
   getInitialState: function() {
     return {
       date: new DateUtil(this.props.selected).clone()
@@ -68,7 +74,7 @@ var Calendar = React.createClass({
 
   render: function() {
     return (
-      <div className="datepicker" onMouseDown={this.props.onMouseDown}>
+      <div className="datepicker">
         <div className="datepicker__triangle"></div>
         <div className="datepicker__header">
           <a className="datepicker__navigation datepicker__navigation--previous"

src/date_input.js

@@ -72,7 +72,6 @@ var DateInput = React.createClass({
       ref="input"
       type="text"
       value={this.state.value}
-      onBlur={this.props.onBlur}
       onClick={this.handleClick}
       onKeyDown={this.handleKeyDown}
       onFocus={this.props.onFocus}