From 3edf02517fe55c71c174ec0470fdcb98f011667c Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Thu, 6 Jul 2017 21:35:08 -0700
Subject: [PATCH 1/3] gt - Add onBlur prop to DateInput

---
 src/components/DateInput.js       | 13 +++++++++++++
 stories/DateInput.js              |  1 +
 test/components/DateInput.spec.js |  9 +++++++++
 3 files changed, 23 insertions(+)

diff --git a/src/components/DateInput.js b/src/components/DateInput.js
index 3c7164a07..22220ccf4 100644
--- a/src/components/DateInput.js
+++ b/src/components/DateInput.js
@@ -69,6 +69,7 @@ export default class DateInput extends Component {
     className: '',
     dateFormat: 'M/D/YYYY',
     keyboard: true,
+    onBlur: () => {},
     onChange: () => {},
     showOnFocus: true,
     disabled: false
@@ -88,6 +89,17 @@ export default class DateInput extends Component {
     };
   }
 
+  onBlur = event => {
+    const value = event.target.value;
+    const date = parse(value, this.props.dateFormat);
+
+    if (date) {
+      this.props.onBlur(date, true);
+    } else {
+      this.props.onBlur(value, false);
+    }
+  }
+
   onChange = event => {
     const value = event.target.value;
     this.setState({
@@ -186,6 +198,7 @@ export default class DateInput extends Component {
             <Input
               type="text"
               value={value}
+              onBlur={this.onBlur}
               onChange={this.onChange}
               onClick={showOnFocus && this.show}
               onFocus={showOnFocus && this.show}
diff --git a/stories/DateInput.js b/stories/DateInput.js
index cc91f9182..1ebc07db5 100644
--- a/stories/DateInput.js
+++ b/stories/DateInput.js
@@ -10,6 +10,7 @@ storiesOf('DateInput', module)
         dateFormat={text('dateFormat', DateInput.defaultProps.dateFormat)}
         showOnFocus={boolean('showOnFocus', DateInput.defaultProps.showOnFocus)}
         disabled={boolean('disabled', DateInput.defaultProps.disabled)}
+        onBlur={action('onBlur')}
         onChange={action('onChange')}
       />
     </div>
diff --git a/test/components/DateInput.spec.js b/test/components/DateInput.spec.js
index 1457fef10..158b93bcc 100644
--- a/test/components/DateInput.spec.js
+++ b/test/components/DateInput.spec.js
@@ -140,6 +140,15 @@ describe('<DateInput />', () => {
       input.simulate('change', { target: { value: 'Grape Jelly' } });
       assert(callback.calledWith('Grape Jelly', false));
     });
+
+    it('should should call onBlur after losing focus', () => {
+      const callback = sinon.spy();
+      const garbage = 'yadda yadda';
+      const component = mount(<DateInput onBlur={callback} value={garbage} />);
+      const input = component.find('input');
+      input.simulate('blur');
+      assert(callback.calledWith(garbage, false));
+    });
   });
 
   context('date picker', () => {

From 6ac250e0db560bfa3a76ee5a6950b6a2f8d6fecd Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Thu, 6 Jul 2017 21:41:29 -0700
Subject: [PATCH 2/3] gt - Add onBlur propType

---
 src/components/DateInput.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/DateInput.js b/src/components/DateInput.js
index 22220ccf4..607f63d4b 100644
--- a/src/components/DateInput.js
+++ b/src/components/DateInput.js
@@ -59,6 +59,7 @@ export default class DateInput extends Component {
       React.PropTypes.object
     ]),
     keyboard: React.PropTypes.bool,
+    onBlur: React.PropTypes.func,
     onChange: React.PropTypes.func,
     showOnFocus: React.PropTypes.bool,
     disabled: React.PropTypes.bool,

From 8cb7e881cb4c9d1d231922b4fabce5aeee78fd7c Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Fri, 7 Jul 2017 12:17:41 -0700
Subject: [PATCH 3/3] gt - Remove value passing in onBlur

---
 src/components/DateInput.js       | 15 ++-------------
 test/components/DateInput.spec.js |  5 ++---
 2 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/src/components/DateInput.js b/src/components/DateInput.js
index 607f63d4b..b5a2d4a0f 100644
--- a/src/components/DateInput.js
+++ b/src/components/DateInput.js
@@ -90,17 +90,6 @@ export default class DateInput extends Component {
     };
   }
 
-  onBlur = event => {
-    const value = event.target.value;
-    const date = parse(value, this.props.dateFormat);
-
-    if (date) {
-      this.props.onBlur(date, true);
-    } else {
-      this.props.onBlur(value, false);
-    }
-  }
-
   onChange = event => {
     const value = event.target.value;
     this.setState({
@@ -186,7 +175,7 @@ export default class DateInput extends Component {
   toggle = () => (this.state.open ? this.close() : this.show());
 
   render() {
-    const { className, disabled, showOnFocus } = this.props;
+    const { className, disabled, onBlur, showOnFocus } = this.props;
     const { open } = this.state;
     const value = this.getCurrentValue();
     const date = this.getCurrentDate();
@@ -199,7 +188,7 @@ export default class DateInput extends Component {
             <Input
               type="text"
               value={value}
-              onBlur={this.onBlur}
+              onBlur={onBlur}
               onChange={this.onChange}
               onClick={showOnFocus && this.show}
               onFocus={showOnFocus && this.show}
diff --git a/test/components/DateInput.spec.js b/test/components/DateInput.spec.js
index 158b93bcc..4c27d2b57 100644
--- a/test/components/DateInput.spec.js
+++ b/test/components/DateInput.spec.js
@@ -143,11 +143,10 @@ describe('<DateInput />', () => {
 
     it('should should call onBlur after losing focus', () => {
       const callback = sinon.spy();
-      const garbage = 'yadda yadda';
-      const component = mount(<DateInput onBlur={callback} value={garbage} />);
+      const component = mount(<DateInput onBlur={callback} />);
       const input = component.find('input');
       input.simulate('blur');
-      assert(callback.calledWith(garbage, false));
+      assert(callback.calledOnce);
     });
   });