Update focus and blue events to take calendar into account. 1.1 Release. #1

Author: wehriam

example/app.jsx

@@ -69,6 +69,18 @@ const App = React.createClass({
           </form>
         </Col>
       </Row>
+      <Row>
+        <Col xs={12}>
+          <h2>Blur and Focus Events</h2>
+        </Col>
+      </Row>
+      <Row>
+        <Col sm={6}>
+          <form>
+            <DatePicker placeholder="Placeholder" help="Open console to see focus/blur logging." value={this.state.date} onFocus={() => {console.log("Focus")}} onBlur={() => {console.log("Blur")}}/>
+          </form>
+        </Col>
+      </Row>
       <Row>
         <Col xs={12}>
           <h2>Styles</h2>

lib/index.js

@@ -88,7 +88,11 @@ var Calendar = _react2.default.createClass({
     displayDate: _react2.default.PropTypes.object.isRequired,
     onChange: _react2.default.PropTypes.func.isRequired,
     dayLabels: _react2.default.PropTypes.array.isRequired,
-    cellPadding: _react2.default.PropTypes.string.isRequired
+    cellPadding: _react2.default.PropTypes.string.isRequired,
+    onUnmount: _react2.default.PropTypes.func.isRequired
+  },
+  componentWillUnmount: function componentWillUnmount() {
+    this.props.onUnmount();
   },
   handleClick: function handleClick(day) {
     var newSelectedDate = new Date(this.props.displayDate);
@@ -232,7 +236,21 @@ exports.default = _react2.default.createClass({
       this.props.valueLink.requestChange(null);
     }
   },
+  handleHide: function handleHide(e) {
+    if (document.activeElement === this.refs.input.getInputDOMNode()) {
+      return;
+    }
+    this.setState({
+      focused: false
+    });
+    if (this.props.onBlur) {
+      this.props.onBlur(e);
+    }
+  },
   handleFocus: function handleFocus(e) {
+    if (this.refs.overlay.state.isOverlayShown === true) {
+      return;
+    }
     this.setState({
       focused: true
     });
@@ -241,6 +259,9 @@ exports.default = _react2.default.createClass({
     }
   },
   handleBlur: function handleBlur(e) {
+    if (this.refs.overlay.state.isOverlayShown === true) {
+      return;
+    }
     this.setState({
       focused: false
     });
@@ -329,7 +350,7 @@ exports.default = _react2.default.createClass({
     var popOver = _react2.default.createElement(
       _Popover2.default,
       { id: 'calendar', title: calendarHeader },
-      _react2.default.createElement(Calendar, { cellPadding: this.props.cellPadding, selectedDate: this.state.selectedDate, displayDate: this.state.displayDate, onChange: this.onChangeDate, dayLabels: this.props.dayLabels })
+      _react2.default.createElement(Calendar, { cellPadding: this.props.cellPadding, selectedDate: this.state.selectedDate, displayDate: this.state.displayDate, onChange: this.onChangeDate, dayLabels: this.props.dayLabels, onUnmount: this.handleHide })
     );
     var buttonStyle = this.props.bsStyle === "error" ? "danger" : this.props.bsStyle;
     var clearButton = _react2.default.createElement(

package.json

@@ -2,7 +2,7 @@
   "name": "react-bootstrap-date-picker",
   "keywords": ["react", "react-component", "react-bootstrap", "bootstrap", "date picker", "calendar", "date", "picker"],
   "main": "lib/index.js",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "React-Bootstrap based date picker.",
   "directories": {
     "test": "test"

src/index.jsx

@@ -56,7 +56,11 @@ const Calendar = React.createClass({
     displayDate: React.PropTypes.object.isRequired,
     onChange: React.PropTypes.func.isRequired,
     dayLabels: React.PropTypes.array.isRequired,
-    cellPadding: React.PropTypes.string.isRequired
+    cellPadding: React.PropTypes.string.isRequired,
+    onUnmount: React.PropTypes.func.isRequired
+  },
+  componentWillUnmount(){
+    this.props.onUnmount();
   },
   handleClick(day) {
     const newSelectedDate = new Date(this.props.displayDate);
@@ -187,7 +191,21 @@ export default React.createClass({
       this.props.valueLink.requestChange(null);
     }
   },
+  handleHide(e){
+    if(document.activeElement === this.refs.input.getInputDOMNode()) {
+      return;
+    }
+    this.setState({
+      focused: false
+    });
+    if(this.props.onBlur) {
+      this.props.onBlur(e);
+    }
+  },
   handleFocus(e){
+    if(this.refs.overlay.state.isOverlayShown === true) {
+      return;
+    }
     this.setState({
       focused: true
     });
@@ -196,6 +214,9 @@ export default React.createClass({
     }
   },
   handleBlur(e){
+    if(this.refs.overlay.state.isOverlayShown === true) {
+      return;
+    }
     this.setState({
       focused: false
     });
@@ -284,7 +305,7 @@ export default React.createClass({
       onChange={this.onChangeMonth}
       monthLabels={this.props.monthLabels} />;
     const popOver = <Popover id="calendar" title={calendarHeader}>
-      <Calendar cellPadding={this.props.cellPadding} selectedDate={this.state.selectedDate} displayDate={this.state.displayDate} onChange={this.onChangeDate} dayLabels={this.props.dayLabels} />
+      <Calendar cellPadding={this.props.cellPadding} selectedDate={this.state.selectedDate} displayDate={this.state.displayDate} onChange={this.onChangeDate} dayLabels={this.props.dayLabels} onUnmount={this.handleHide} />
     </Popover>;
     const buttonStyle = this.props.bsStyle === "error" ? "danger" : this.props.bsStyle;
     const clearButton = <Button onClick={this.clear} bsStyle={buttonStyle || "default"} disabled={!this.state.inputValue}>{this.props.clearButtonElement}</Button>;