[DatePicker] Add keyboard support to inline mode

docs/src/app/components/pages/components/DatePicker/ExampleInline.js

@@ -8,6 +8,12 @@ const DatePickerExampleInline = () => (
   <div>
     <DatePicker hintText="Portrait Inline Dialog" container="inline" />
     <DatePicker hintText="Landscape Inline Dialog" container="inline" mode="landscape" />
+    <DatePicker
+      hintText="Keyboard Enabled Dialog"
+      container="inline"
+      mode="landscape"
+      keyboardEnabled={true}
+    />
   </div>
 );
 

src/DatePicker/DatePicker.js

@@ -2,6 +2,7 @@ import React, {Component, PropTypes} from 'react';
 import {dateTimeFormat, formatIso, isEqualDate} from './dateUtils';
 import DatePickerDialog from './DatePickerDialog';
 import TextField from '../TextField';
+import keycode from 'keycode';
 
 class DatePicker extends Component {
   static propTypes = {
@@ -50,6 +51,10 @@ class DatePicker extends Component {
      * Disables the DatePicker.
      */
     disabled: PropTypes.bool,
+    /**
+     * The error content to display
+     */
+    errorText: PropTypes.string,
     /**
      * Used to change the first day of week. It varies from
      * Saturday to Monday between different locales.
@@ -65,6 +70,14 @@ class DatePicker extends Component {
      * @returns {any} The formatted date.
      */
     formatDate: PropTypes.func,
+    /**
+     * The hint content to display
+     */
+    hintText: PropTypes.string,
+    /**
+     * Tells the datepicker to handle keyboard input. The container must also be set to inline for this to take effect.
+     */
+    keyboardEnabled: PropTypes.bool,
     /**
      * Locale used for formatting the `DatePicker` date strings. Other than for 'en-US', you
      * must provide a `DateTimeFormat` that supports the chosen `locale`.
@@ -150,6 +163,7 @@ class DatePicker extends Component {
 
   state = {
     date: undefined,
+    keyboardActivated: false,
   };
 
   componentWillMount() {
@@ -170,7 +184,7 @@ class DatePicker extends Component {
   }
 
   getDate() {
-    return this.state.date;
+    return this.state.date instanceof Date ? this.state.date : undefined;
   }
 
   /**
@@ -182,6 +196,9 @@ class DatePicker extends Component {
      * (get the current system date while doing so)
      * else set it to the currently selected date
      */
+    if (this.shouldHandleKeyboard)
+      this.refs.input.focus();
+
     if (this.state.date !== undefined) {
       this.setState({
         dialogDate: this.getDate(),
@@ -200,6 +217,12 @@ class DatePicker extends Component {
     this.openDialog();
   }
 
+  shouldHandleKeyboard = () => {
+    return this.props.keyboardEnabled &&
+      !this.props.disabled &&
+      this.props.container === 'inline';
+  }
+
   handleAccept = (date) => {
     if (!this.isControlled()) {
       this.setState({
@@ -211,13 +234,80 @@ class DatePicker extends Component {
     }
   };
 
-  handleFocus = (event) => {
-    event.target.blur();
+  handleInputFocus = (event) => {
+    if (this.shouldHandleKeyboard()) {
+      this.setState({keyboardActivated: true}, this.focus);
+    } else {
+      event.target.blur();
+    }
+
     if (this.props.onFocus) {
       this.props.onFocus(event);
     }
   };
 
+  handleInputBlur = () => {
+    this.setState({
+      keyboardActivated: false,
+      date: this.state.date instanceof Date ? this.state.date : undefined,
+    });
+  }
+
+  handleKeyDown = (event) => {
+    if (!this.shouldHandleKeyboard)
+      return;
+
+    const key = keycode(event);
+    switch (key) {
+      case 'tab':
+        if (this.state.keyboardActivated)
+          this.setState({keyboardActivated: false}, this.refs.dialogWindow.dismiss);
+        break;
+      case 'right':
+      case 'left':
+      case 'up':
+      case 'down':
+        event.stopPropagation();
+        break;
+    }
+  }
+
+  handleKeyUp = (event) => {
+    if (!this.shouldHandleKeyboard)
+      return;
+
+    const key = keycode(event);
+    switch (key) {
+      case 'enter':
+        if (this.refs.dialogWindow.state.open) {
+          event.stopPropagation();
+          event.preventDefault();
+          this.refs.dialogWindow.dismiss();
+        }
+        break;
+    }
+  }
+
+  handleInputChange = (event) => {
+    if (!this.refs.dialogWindow.state.open) {
+      this.refs.dialogWindow.show();
+    }
+
+    const filtered = event.target.value.replace(/[^0-9\-\/]/gi, '').replace('/', '-');
+    let dt = undefined;
+    if (filtered.length === 10) {
+      // we split this manually as Date.parse is implementation specific
+      // and also because it doesn't use the browser's timezone.
+      const parts = filtered.split('-');
+      if (parts.length === 3)
+        dt = new Date(parts[0], parts[1] - 1, parts[2]); // Note: months are 0 based
+    }
+
+    this.setState({
+      date: !dt || isNaN(dt.getTime()) ? filtered : dt,
+    });
+  }
+
   handleTouchTap = (event) => {
     if (this.props.onTouchTap) {
       this.props.onTouchTap(event);
@@ -265,6 +355,7 @@ class DatePicker extends Component {
       disableYearSelection,
       firstDayOfWeek,
       formatDate: formatDateProp,
+      keyboardEnabled,
       locale,
       maxDate,
       minDate,
@@ -282,20 +373,35 @@ class DatePicker extends Component {
 
     const {prepareStyles} = this.context.muiTheme;
     const formatDate = formatDateProp || this.formatDate;
+    const rawDate = this.state.date instanceof Date ?
+      formatDate(this.state.date) :
+      this.state.date;
+    const inputError = rawDate !== undefined && !(this.state.date instanceof Date) ?
+      'Enter a valid date' :
+      this.props.errorText;
+    const hintText = keyboardEnabled && this.state.keyboardActivated ? 'yyyy-mm-dd' : this.props.hintText;
 
     return (
-      <div className={className} style={prepareStyles(Object.assign({}, style))}>
+      <div ref="root" className={className} style={prepareStyles(Object.assign({}, style))}>
         <TextField
           {...other}
-          onFocus={this.handleFocus}
+          onFocus={this.handleInputFocus}
+          onBlur={this.handleInputBlur}
+          onKeyDown={this.handleKeyDown}
+          onKeyUp={this.handleKeyUp}
           onTouchTap={this.handleTouchTap}
+          tabIndex={this.shouldHandleKeyboard() ? 0 : 1}
+          onChange={this.handleInputChange}
           ref="input"
           style={textFieldStyle}
-          value={this.state.date ? formatDate(this.state.date) : ''}
+          value={rawDate ? rawDate : ''}
+          errorText={inputError}
+          hintText={hintText}
         />
         <DatePickerDialog
           DateTimeFormat={DateTimeFormat}
           autoOk={autoOk}
+          anchorEl={this.refs.root}
           cancelLabel={cancelLabel}
           container={container}
           containerStyle={dialogContainerStyle}

src/DatePicker/DatePickerDialog.js

@@ -10,6 +10,7 @@ import {dateTimeFormat} from './dateUtils';
 class DatePickerDialog extends Component {
   static propTypes = {
     DateTimeFormat: PropTypes.func,
+    anchorEl: PropTypes.object,
     animation: PropTypes.func,
     autoOk: PropTypes.bool,
     cancelLabel: PropTypes.node,
@@ -102,6 +103,7 @@ class DatePickerDialog extends Component {
   render() {
     const {
       DateTimeFormat,
+      anchorEl,
       autoOk,
       cancelLabel,
       container,
@@ -141,7 +143,7 @@ class DatePickerDialog extends Component {
     return (
       <div {...other} ref="root">
         <Container
-          anchorEl={this.refs.root} // For Popover
+          anchorEl={anchorEl || this.refs.root} // For Popover
           animation={animation || PopoverAnimationVertical} // For Popover
           bodyStyle={styles.dialogBodyContent}
           contentStyle={styles.dialogContent}

src/DropDownMenu/DropDownMenu.js

@@ -1,10 +1,14 @@
 import React, {Component, PropTypes} from 'react';
+import ReactDOM from 'react-dom';
 import transitions from '../styles/transitions';
 import DropDownArrow from '../svg-icons/navigation/arrow-drop-down';
 import Menu from '../Menu/Menu';
 import ClearFix from '../internal/ClearFix';
 import Popover from '../Popover/Popover';
 import PopoverAnimationVertical from '../Popover/PopoverAnimationVertical';
+import keycode from 'keycode';
+import Events from '../utils/events';
+import IconButton from '../IconButton/IconButton';
 
 const anchorOrigin = {
   vertical: 'top',
@@ -27,17 +31,15 @@ function getStyles(props, context) {
       fill: accentColor,
       position: 'absolute',
       right: spacing.desktopGutterLess,
-      top: ((spacing.desktopToolbarHeight - 24) / 2),
+      top: ((spacing.iconSize - 24) / 2) + spacing.desktopGutterMini / 2,
     },
     label: {
       color: disabled ? palette.disabledColor : palette.textColor,
       lineHeight: `${spacing.desktopToolbarHeight}px`,
       opacity: 1,
       position: 'relative',
       paddingLeft: spacing.desktopGutter,
-      paddingRight: spacing.iconSize +
-      spacing.desktopGutterLess +
-      spacing.desktopGutterMini,
+      paddingRight: (spacing.iconSize * 2) + spacing.desktopGutterMini,
       top: 0,
     },
     labelWhenOpen: {
@@ -223,23 +225,62 @@ class DropDownMenu extends Component {
   };
 
   handleRequestCloseMenu = () => {
-    this.setState({
-      open: false,
-      anchorEl: null,
-    });
+    this.close(false);
+  };
+
+  handleFocus = (event) => {
+    // this is a work-around for SelectField losing keyboard focus
+    // because the containing TextField re-renders
+    if (event) event.stopPropagation();
+  }
+
+  handleBlur = (event) => {
+    if (event) event.stopPropagation();
+  }
+
+  handleEscKeyDownMenu = (event) => {
+    event.preventDefault();
+    this.close(true);
+  };
+
+  handleKeyDown = (event) => {
+    const key = keycode(event);
+    switch (key) {
+      case 'down':
+      case 'space':
+        event.preventDefault();
+        this.setState({
+          open: true,
+          anchorEl: this.refs.root,
+        });
+        break;
+    }
   };
 
   handleItemTouchTap = (event, child, index) => {
     event.persist();
+    event.preventDefault();
     this.setState({
       open: false,
     }, () => {
       if (this.props.onChange) {
         this.props.onChange(event, index, child.props.value);
       }
+      this.close(Events.isKeyboard(event));
     });
   };
 
+  close = (isKeyboard) => {
+    this.setState({open: false}, () => {
+      if (isKeyboard) {
+        const dropArrow = this.refs.dropArrow;
+        const dropNode = ReactDOM.findDOMNode(dropArrow);
+        dropNode.focus();
+        dropArrow.setKeyboardFocus(true);
+      }
+    });
+  }
+
   render() {
     const {
       animated,
@@ -292,12 +333,20 @@ class DropDownMenu extends Component {
         style={prepareStyles(Object.assign({}, styles.root, open && styles.rootWhenOpen, style))}
       >
         <ClearFix style={styles.control} onTouchTap={this.handleTouchTapControl}>
-          <div
-            style={prepareStyles(Object.assign({}, styles.label, open && styles.labelWhenOpen, labelStyle))}
-          >
+          <div style={prepareStyles(Object.assign({}, styles.label, open && styles.labelWhenOpen, labelStyle))}>
             {displayValue}
           </div>
-          <DropDownArrow style={Object.assign({}, styles.icon, iconStyle)} />
+          <IconButton
+            centerRipple={true}
+            tabIndex={this.props.disabled ? -1 : 0}
+            onKeyDown={this.handleKeyDown}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
+            ref="dropArrow"
+            style={Object.assign({}, styles.icon, iconStyle)}
+          >
+            <DropDownArrow />
+          </IconButton>
           <div style={prepareStyles(Object.assign({}, styles.underline, underlineStyle))} />
         </ClearFix>
         <Popover
@@ -312,6 +361,7 @@ class DropDownMenu extends Component {
             maxHeight={maxHeight}
             desktop={true}
             value={value}
+            onEscKeyDown={this.handleEscKeyDownMenu}
             style={menuStyle}
             listStyle={listStyle}
             onItemTouchTap={this.handleItemTouchTap}

src/SelectField/SelectField.js

@@ -10,7 +10,7 @@ function getStyles(props) {
     },
     icon: {
       right: 0,
-      top: props.floatingLabelText ? 22 : 14,
+      top: props.floatingLabelText ? 8 : 0,
     },
     hideDropDownUnderline: {
       borderTop: 'none',