Don't prevent default for modifiers+up/down. Fixes #4.

twitter · Feb 20, 2013 · a79a957 · a79a957
1 parent 6fe9579
commit a79a957
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 24 deletions.
diff --git a/src/js/input_view.js b/src/js/input_view.js
@@ -15,13 +15,13 @@ var InputView = (function() {
     utils.bindAll(this);
 
     this.specialKeyCodeMap = {
-      9: { event: 'tab' },
-      27: { event: 'esc' },
-      37: { event: 'left' },
-      39: { event: 'right' },
-      13: { event: 'enter' },
-      38: { event: 'up', preventDefault: true },
-      40: { event: 'down', preventDefault: true }
+      9: 'tab',
+      27: 'esc',
+      37: 'left',
+      39: 'right',
+      13: 'enter',
+      38: 'up',
+      40: 'down'
     };
 
     this.query = '';
@@ -66,12 +66,9 @@ var InputView = (function() {
 
     _handleSpecialKeyEvent: function(e) {
       // which is normalized and consistent (but not for IE)
-      var keyCode = this.specialKeyCodeMap[e.which || e.keyCode];
+      var keyName = this.specialKeyCodeMap[e.which || e.keyCode];
 
-      if (keyCode) {
-        this.trigger(keyCode.event, e);
-        keyCode.preventDefault && e.preventDefault();
-      }
+      keyName && this.trigger(keyName, e);
     },
 
     _compareQueryToInputValue: function() {
@@ -100,10 +97,6 @@ var InputView = (function() {
       this.$input.blur();
     },
 
-    setPreventDefaultValueForKey: function(key, value) {
-      this.specialKeyCodeMap[key].preventDefault = !!value;
-    },
-
     getQuery: function() {
       return this.query;
     },

diff --git a/src/js/typeahead_view.js b/src/js/typeahead_view.js
@@ -74,24 +74,37 @@ var TypeaheadView = (function() {
     .on('queryChange whitespaceChange', this._setLanguageDirection)
     .on('esc', this._hideDropdown)
     .on('esc', this._setInputValueToQuery)
+    .on('up down', this._managePreventDefault)
     .on('up down', this._moveDropdownCursor)
     .on('up down', this._showDropdown)
-    .on('tab', this._setPreventDefaultValueForTab)
+    .on('tab', this._managePreventDefault)
     .on('tab left right', this._autocomplete);
   }
 
   utils.mixin(TypeaheadView.prototype, EventTarget, {
     // private methods
     // ---------------
 
-    _setPreventDefaultValueForTab: function(e) {
-      var hint = this.inputView.getHintValue(),
-          inputValue = this.inputView.getInputValue(),
+    _managePreventDefault: function(e) {
+      var $e = e.data,
+          hint,
+          inputValue,
+          preventDefault = false;
+
+      switch (e.type) {
+        case 'tab':
+          hint = this.inputView.getHintValue();
+          inputValue = this.inputView.getInputValue();
           preventDefault = hint && hint !== inputValue;
+          break;
+
+        case 'up':
+        case 'down':
+          preventDefault = !$e.shiftKey && !$e.ctrlKey && !$e.metaKey;
+          break;
+      }
 
-      // if the user tabs to autocomplete while the menu is open
-      // this will prevent the focus from being lost from the query input
-      this.inputView.setPreventDefaultValueForKey('9', preventDefault);
+      preventDefault && $e.preventDefault();
     },
 
     _setLanguageDirection: function() {
@@ -149,7 +162,12 @@ var TypeaheadView = (function() {
     },
 
     _moveDropdownCursor: function(e) {
-      this.dropdownView[e.type === 'up' ? 'moveCursorUp' : 'moveCursorDown']();
+      var $e = e.data;
+
+      if (!$e.shiftKey && !$e.ctrlKey && !$e.metaKey) {
+        this.dropdownView[e.type === 'up' ?
+          'moveCursorUp' : 'moveCursorDown']();
+      }
     },
 
     _handleSelection: function(e) {