Add event target to onFocus and onBlur events.

Author: wehriam

src/index.jsx

@@ -198,15 +198,18 @@ export default React.createClass({
       this.props.onChange(null);
     }
   },
-  handleHide(e){
+  handleHide(){
     if(this.state.inputFocused) {
       return;
     }
     this.setState({
       focused: false
     });
     if(this.props.onBlur) {
-      this.props.onBlur(e);
+      const event = document.createEvent('CustomEvent');
+      event.initEvent("Change Date", true, false);
+      ReactDOM.findDOMNode(this.refs.hiddenInput).dispatchEvent(event);
+      this.props.onBlur(event);
     }
   },
   handleKeyDown(e){
@@ -215,7 +218,10 @@ export default React.createClass({
         focused: false
       });
       if(this.props.onBlur) {
-        this.props.onBlur(e);
+        const event = document.createEvent('CustomEvent');
+        event.initEvent("Change Date", true, false);
+        ReactDOM.findDOMNode(this.refs.hiddenInput).dispatchEvent(event);
+        this.props.onBlur(event);
       }
     }
   },
@@ -228,7 +234,10 @@ export default React.createClass({
       focused: true
     });
     if(this.props.onFocus) {
-      this.props.onFocus(e);
+      const event = document.createEvent('CustomEvent');
+      event.initEvent("Change Date", true, false);
+      ReactDOM.findDOMNode(this.refs.hiddenInput).dispatchEvent(event);
+      this.props.onFocus(event);
     }
   },
   handleBlur(e){
@@ -350,6 +359,7 @@ export default React.createClass({
     if(this.props.onBlur) {
       const event = document.createEvent('CustomEvent');
       event.initEvent("Change Date", true, false);
+      ReactDOM.findDOMNode(this.refs.hiddenInput).dispatchEvent(event);
       this.props.onBlur(event);
     }
     if(this.props.onChange) {
@@ -377,7 +387,7 @@ export default React.createClass({
         </Popover>
       </Overlay>
       <div ref="overlayContainer" />
-      <input type="hidden" id={this.props.id} name={this.props.name} value={this.state.value || ''} />
+      <input ref="hiddenInput" type="hidden" id={this.props.id} name={this.props.name} value={this.state.value || ''} />
       <FormControl
         onKeyDown={this.handleKeyDown}
         value={this.state.inputValue || ''}

test/core.test.jsx

@@ -257,18 +257,23 @@ describe("Date Picker", function() {
   it("should call focus and blur handlers.", co.wrap(function *(){
     const id = UUID.v4();
     var results = {};
+    var value = new Date().toISOString();
     const App = React.createClass({
       getInitialState: function() {
         return {
           focused: false
         }
       },
-      focusHandler: function() {
+      focusHandler: function(e) {
+        assert.equal(e.target, document.querySelector("input[type=hidden]"));
+        assert.equal(e.target.value, value);
         this.setState({
           focused: true
         });
       },
-      blurHandler: function() {
+      blurHandler: function(e) {
+        assert.equal(e.target, document.querySelector("input[type=hidden]"));
+        assert.equal(e.target.value, value);
         this.setState({
           focused: false
         });
@@ -277,7 +282,7 @@ describe("Date Picker", function() {
         return <div>
           <div id='blurringClickTarget'>Blurring Click Target</div>
           {this.state.focused ? <div id="focused">Focused</div> : <div id="blurred">Blurred</div>}
-          <DatePicker id={id} onBlur={this.blurHandler} onFocus={this.focusHandler} />
+          <DatePicker id={id} onBlur={this.blurHandler} onFocus={this.focusHandler} value={value} />
         </div>;
       }
     });