Merge branch 'master' of github.com:gpbl/react-day-picker

Author: gpbl

src/DayPickerInput.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import DayPicker from './DayPicker';
 import { getModifiersForDay } from './ModifiersUtils';
-import { ESC } from './keys';
+import { ESC, TAB } from './keys';
 
 // When clicking on a day cell, overlay will be hidden after this timeout
 export const HIDE_TIMEOUT = 100;
@@ -81,6 +81,7 @@ export default class DayPickerInput extends React.Component {
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     onKeyUp: PropTypes.func,
+    onKeyDown: PropTypes.func,
   };
 
   static defaultProps = {
@@ -120,6 +121,7 @@ export default class DayPickerInput extends React.Component {
     this.handleInputBlur = this.handleInputBlur.bind(this);
     this.handleInputChange = this.handleInputChange.bind(this);
     this.handleInputKeyUp = this.handleInputKeyUp.bind(this);
+    this.handleInputKeyDown = this.handleInputKeyDown.bind(this);
     this.handleDayClick = this.handleDayClick.bind(this);
   }
 
@@ -334,6 +336,16 @@ export default class DayPickerInput extends React.Component {
     this.updateState(day, value);
   }
 
+  handleInputKeyDown(e) {
+    if (e.keyCode === TAB) {
+      this.clickedInside = true;
+    }
+    if (this.props.inputProps.onKeyDown) {
+      e.persist();
+      this.props.inputProps.onKeyDown(e);
+    }
+  }
+
   handleInputKeyUp(e) {
     // Hide the overlay if the ESC key is pressed
     this.setState({ showOverlay: e.keyCode !== ESC });
@@ -453,6 +465,7 @@ export default class DayPickerInput extends React.Component {
           onBlur={this.handleInputBlur}
           onKeyUp={this.handleInputKeyUp}
           onClick={this.handleInputClick}
+          onKeyDown={this.handleInputKeyDown}
         />
         {this.state.showOverlay && this.renderOverlay()}
       </div>

src/addons/MomentLocaleUtils.js

@@ -53,7 +53,7 @@ export function formatDate(date, format = 'L', locale = 'en') {
 }
 
 export function parseDate(str, format = 'L', locale = 'en') {
-  const m = moment(str, format, locale);
+  const m = moment(str, format, locale, true);
   if (m.isValid()) {
     return m.toDate();
   }

src/keys.js

@@ -5,3 +5,4 @@ export const DOWN = 40;
 export const ENTER = 13;
 export const SPACE = 32;
 export const ESC = 27;
+export const TAB = 9;

test/addons/MomentLocaleUtils.js

@@ -101,5 +101,9 @@ describe('MomentLocaleUtils', () => {
       const parsed = MomentLocaleUtils.parseDate('20 foo 2018', 'LL', 'it');
       expect(parsed).toBeUndefined();
     });
+    it('returns undefined if date does not match the format', () => {
+      const parsed = MomentLocaleUtils.parseDate('20/11/201', 'DD/MM/YYYY');
+      expect(parsed).toBeUndefined();
+    });
   });
 });

test/daypickerinput/events.js

@@ -154,6 +154,21 @@ describe('DayPickerInput', () => {
         expect(onKeyUp).toHaveBeenCalledTimes(1);
       });
     });
+    describe('keydown', () => {
+      it('should not hide the overlay on TAB', () => {
+        const wrapper = mount(<DayPickerInput />);
+        wrapper.instance().showDayPicker();
+        wrapper.update();
+        wrapper.find('input').simulate('keydown', { keyCode: keys.TAB });
+        expect(wrapper.state('showOverlay')).toBe(true);
+      });
+      it('should call `onKeyDown` event handler', () => {
+        const onKeyDown = jest.fn();
+        const wrapper = mount(<DayPickerInput inputProps={{ onKeyDown }} />);
+        wrapper.find('input').simulate('keydown');
+        expect(onKeyDown).toHaveBeenCalledTimes(1);
+      });
+    });
     describe('dayclick', () => {
       it('should call `onDayClick` event handler', () => {
         const onDayClick = jest.fn();