Merge pull request #258 from appfolio/addDateInputOnBlur

gt - Add onBlur prop to DateInput
appfolio · Jul 7, 2017 · 5727a63 · 5727a63
2 parents 1530d2c + 8cb7e88
commit 5727a63
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git 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,
@@ -69,6 +70,7 @@ export default class DateInput extends Component {
     className: '',
     dateFormat: 'M/D/YYYY',
     keyboard: true,
+    onBlur: () => {},
     onChange: () => {},
     showOnFocus: true,
     disabled: false
@@ -173,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();
@@ -186,6 +188,7 @@ export default class DateInput extends Component {
             <Input
               type="text"
               value={value}
+              onBlur={onBlur}
               onChange={this.onChange}
               onClick={showOnFocus && this.show}
               onFocus={showOnFocus && this.show}

diff --git 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
@@ -140,6 +140,14 @@ 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 component = mount(<DateInput onBlur={callback} />);
+      const input = component.find('input');
+      input.simulate('blur');
+      assert(callback.calledOnce);
+    });
   });
 
   context('date picker', () => {