Merge pull request #138 from unchartedsoftware/issue/136

#136 - setup enter and tab key handling for date picker

Author: Ghnuberath

src/components/assistants/temporal/datetime-entry-assistant.jsx

@@ -3,6 +3,7 @@ import { bind } from 'decko';
 import { Assistant } from '../../assistant';
 import TinyDatePicker from 'tiny-date-picker';
 import { toChar } from '../../../lib/string-util';
+import { ENTER, TAB } from '../../../lib/keys';
 
 /**
  * A visual interaction mechanism for supplying values
@@ -43,13 +44,13 @@ export class DateTimeEntryAssistant extends Assistant {
       if (this.dateInput) {
         this.dateInput.setState({
           selectedDate: newDate,
-          highlightedDate: newDate
+          hilightedDate: newDate
         });
       }
     } else if (this.dateInput) {
       this.dateInput.setState({
         selectedDate: null,
-        highlightedDate: new Date()
+        hilightedDate: new Date()
       });
     }
   }
@@ -89,6 +90,28 @@ export class DateTimeEntryAssistant extends Assistant {
     this.requestRemoveArchivedValue(idx);
   }
 
+  delegateEvent (e) {
+    let consumed = false;
+    switch (e.keyCode) {
+      case ENTER:
+      case TAB:
+        // Use the currently "focused" date if we dont have a value
+        if (this.boxedValue == null && this.dateInput && this.dateInput.state.hilightedDate) {
+          this.boxedValue = this.dateInput.state.hilightedDate;
+        }
+
+        this.requestTransition();
+
+        consumed = true;
+        break;
+    }
+    if (consumed) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+    return consumed;
+  }
+
   renderArchive () {
     if (this.machineState.isMultivalue) {
       return (