Improve Keyboard UX

src/Calendar.jsx

@@ -99,7 +99,12 @@ const Calendar = createReactClass({
   },
   onKeyDown(event) {
     if (event.target.nodeName.toLowerCase() === 'input') {
-      return undefined;
+      if (
+        event.keyCode !== KeyCode.ESC &&
+        event.keyCode !== KeyCode.ENTER &&
+        event.keyCode !== KeyCode.TAB) {
+        return undefined;
+      }
     }
     const keyCode = event.keyCode;
     // mac
@@ -247,6 +252,7 @@ const Calendar = createReactClass({
 
     const dateInputElement = props.showDateInput ? (
       <DateInput
+        dateInputRef={props.dateInputRef}
         format={this.getFormat()}
         key="date-input"
         value={value}

src/Picker.jsx

@@ -62,6 +62,7 @@ const Picker = createReactClass({
     }
     const value = props.value || props.defaultValue;
     this.saveCalendarRef = refFn.bind(this, 'calendarInstance');
+    this.saveDateInputRef = refFn.bind(this, 'dateInputInstance');
     return {
       open,
       value,
@@ -84,8 +85,12 @@ const Picker = createReactClass({
 
   componentDidUpdate(_, prevState) {
     if (!prevState.open && this.state.open) {
-      // setTimeout is for making sure saveCalendarRef happen before focusCalendar
-      this.focusTimeout = setTimeout(this.focusCalendar, 0, this);
+      // setTimeout is for making sure saveRef happen before focus
+      if (!this.props.calendar.props.showDateInput) {
+        this.focusTimeout = setTimeout(this.focusCalendar, 0, this);
+      } else {
+        this.focusTimeout = setTimeout(this.focusDateInput, 0, this);
+      }
     }
   },
 
@@ -94,7 +99,7 @@ const Picker = createReactClass({
   },
 
   onCalendarKeyDown(event) {
-    if (event.keyCode === KeyCode.ESC) {
+    if (event.keyCode === KeyCode.ESC || event.keyCode === KeyCode.TAB) {
       event.stopPropagation();
       this.close(this.focus);
     }
@@ -117,7 +122,7 @@ const Picker = createReactClass({
   },
 
   onKeyDown(event) {
-    if (event.keyCode === KeyCode.DOWN && !this.state.open) {
+    if (event.keyCode === KeyCode.DOWN && !this.state.open && !this.props.disabled) {
       this.open();
       event.preventDefault();
     }
@@ -143,6 +148,7 @@ const Picker = createReactClass({
     const defaultValue = value;
     const extraProps = {
       ref: this.saveCalendarRef,
+      dateInputRef: this.saveDateInputRef,
       defaultValue: defaultValue || calendarProps.defaultValue,
       selectedValue: value,
       onKeyDown: this.onCalendarKeyDown,
@@ -186,6 +192,15 @@ const Picker = createReactClass({
     }
   },
 
+  focusDateInput() {
+    if (this.state.open && this.dateInputInstance !== null) {
+      this.dateInputInstance.focus();
+      if (this.state.value !== null) {
+        this.dateInputInstance.select();
+      }
+    }
+  },
+
   render() {
     const props = this.props;
     const {

src/date/DateInput.js

@@ -95,16 +95,6 @@ const DateInput = createReactClass({
     return ReactDOM.findDOMNode(this);
   },
 
-  focus() {
-    if (this.dateInputInstance) {
-      this.dateInputInstance.focus();
-    }
-  },
-
-  saveDateInput(dateInput) {
-    this.dateInputInstance = dateInput;
-  },
-
   render() {
     const props = this.props;
     const { invalid, str } = this.state;
@@ -113,7 +103,7 @@ const DateInput = createReactClass({
     return (<div className={`${prefixCls}-input-wrap`}>
       <div className={`${prefixCls}-date-input-wrap`}>
         <input
-          ref={this.saveDateInput}
+          ref={props.dateInputRef}
           className={`${prefixCls}-input ${invalidClass}`}
           value={str}
           disabled={props.disabled}