Improve up/down key behavior.

twitter · Mar 8, 2014 · eec4c24 · eec4c24
1 parent 3e30222
commit eec4c24
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 33 deletions.
diff --git a/doc/jquery_typeahead.md b/doc/jquery_typeahead.md
@@ -55,15 +55,15 @@ box. Below details how the UI reacts to pertinent events.
 
 **Up Arrow is Keyed**
 
-* If closed, the dropdown menu is opened and suggestions will get rendered.
-* If the dropdown menu is open and suggestions are present, the cursor of the
-  dropdown menu will move up one suggestion.
+* If closed, the dropdown menu is opened and suggestions are rendered.
+* If open and suggestions are present, the cursor of the dropdown menu will 
+  move up one suggestion.
 
 **Down Arrow is Keyed**
 
-* If closed, the dropdown menu is opened and suggestions will get rendered.
-* If the dropdown menu is open and suggestions are present, the cursor of the
-  dropdown menu will move down one suggestion.
+* If closed, the dropdown menu is opened and suggestions are rendered.
+* If open and suggestions are present, the cursor of the dropdown menu will 
+  move down one suggestion.
 
 **Left Arrow is Keyed**
 

diff --git a/src/typeahead/dataset.js b/src/typeahead/dataset.js
@@ -158,7 +158,8 @@ var Dataset = (function() {
 
     clear: function clear() {
       this.cancel();
-      this._render(this.query || '');
+      this.$el.empty();
+      this.trigger('rendered');
     },
 
     isEmpty: function isEmpty() {

diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js
@@ -157,23 +157,21 @@ var Typeahead = (function() {
     _onUpKeyed: function onUpKeyed() {
       var query = this.input.getQuery();
 
-      if(!this.dropdown.isOpen && query.length >= this.minLength) {
-        this.dropdown.update(query);
-      }
+      this.dropdown.isEmpty && query.length >= this.minLength ?
+        this.dropdown.update(query) :
+        this.dropdown.moveCursorUp();
 
       this.dropdown.open();
-      this.dropdown.moveCursorUp();
     },
 
     _onDownKeyed: function onDownKeyed() {
       var query = this.input.getQuery();
 
-      if(!this.dropdown.isOpen && query.length >= this.minLength) {
-        this.dropdown.update(query);
-      }
+      this.dropdown.isEmpty && query.length >= this.minLength ?
+        this.dropdown.update(query) :
+        this.dropdown.moveCursorDown();
 
       this.dropdown.open();
-      this.dropdown.moveCursorDown();
     },
 
     _onLeftKeyed: function onLeftKeyed() {
@@ -186,8 +184,11 @@ var Typeahead = (function() {
 
     _onQueryChanged: function onQueryChanged(e, query) {
       this.input.clearHint();
-      query === '' && this.dropdown.empty();
-      query.length >= this.minLength && this.dropdown.update(query);
+
+      query.length >= this.minLength ?
+        this.dropdown.update(query) :
+        this.dropdown.empty();
+
       this.dropdown.open();
       this._setLanguageDirection();
     },

diff --git a/test/typeahead_view_spec.js b/test/typeahead_view_spec.js
@@ -276,29 +276,61 @@ describe('Typeahead', function() {
       this.input.getQuery.andReturn('ghost');
     });
 
-    describe('when dropdown is closed and minLength is satisfied', function() {
+    describe('when dropdown is empty and minLength is satisfied', function() {
       beforeEach(function() {
-        this.dropdown.isOpen = false;
+        this.dropdown.isEmpty = true;
         this.view.minLength = 2;
+
+        this.input.trigger('upKeyed');
       });
 
       it('should update dropdown', function() {
+        expect(this.dropdown.update).toHaveBeenCalledWith('ghost');
+      });
+
+      it('should not move cursor up', function() {
+        expect(this.dropdown.moveCursorUp).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when dropdown is not empty', function() {
+      beforeEach(function() {
+        this.dropdown.isEmpty = false;
+        this.view.minLength = 2;
+
         this.input.trigger('upKeyed');
+      });
 
-        expect(this.dropdown.update).toHaveBeenCalledWith('ghost');
+      it('should not update dropdown', function() {
+        expect(this.dropdown.update).not.toHaveBeenCalled();
+      });
+
+      it('should move cursor up', function() {
+        expect(this.dropdown.moveCursorUp).toHaveBeenCalled();
       });
     });
 
-    it('should open the dropdown', function() {
-      this.input.trigger('upKeyed');
+    describe('when minLength is not satisfied', function() {
+      beforeEach(function() {
+        this.dropdown.isEmpty = true;
+        this.view.minLength = 10;
 
-      expect(this.dropdown.open).toHaveBeenCalled();
+        this.input.trigger('upKeyed');
+      });
+
+      it('should not update dropdown', function() {
+        expect(this.dropdown.update).not.toHaveBeenCalled();
+      });
+
+      it('should move cursor up', function() {
+        expect(this.dropdown.moveCursorUp).toHaveBeenCalled();
+      });
     });
 
-    it('should move the cursor up', function() {
+    it('should open the dropdown', function() {
       this.input.trigger('upKeyed');
 
-      expect(this.dropdown.moveCursorUp).toHaveBeenCalled();
+      expect(this.dropdown.open).toHaveBeenCalled();
     });
   });
 
@@ -307,29 +339,61 @@ describe('Typeahead', function() {
       this.input.getQuery.andReturn('ghost');
     });
 
-    describe('when dropdown is closed and minLength is satisfied', function() {
+    describe('when dropdown is empty and minLength is satisfied', function() {
       beforeEach(function() {
-        this.dropdown.isOpen = false;
+        this.dropdown.isEmpty = true;
         this.view.minLength = 2;
+
+        this.input.trigger('downKeyed');
       });
 
       it('should update dropdown', function() {
+        expect(this.dropdown.update).toHaveBeenCalledWith('ghost');
+      });
+
+      it('should not move cursor down', function() {
+        expect(this.dropdown.moveCursorDown).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when dropdown is not empty', function() {
+      beforeEach(function() {
+        this.dropdown.isEmpty = false;
+        this.view.minLength = 2;
+
         this.input.trigger('downKeyed');
+      });
 
-        expect(this.dropdown.update).toHaveBeenCalledWith('ghost');
+      it('should not update dropdown', function() {
+        expect(this.dropdown.update).not.toHaveBeenCalled();
+      });
+
+      it('should move cursor down', function() {
+        expect(this.dropdown.moveCursorDown).toHaveBeenCalled();
       });
     });
 
-    it('should open the dropdown', function() {
-      this.input.trigger('downKeyed');
+    describe('when minLength is not satisfied', function() {
+      beforeEach(function() {
+        this.dropdown.isEmpty = true;
+        this.view.minLength = 10;
 
-      expect(this.dropdown.open).toHaveBeenCalled();
+        this.input.trigger('downKeyed');
+      });
+
+      it('should not update dropdown', function() {
+        expect(this.dropdown.update).not.toHaveBeenCalled();
+      });
+
+      it('should move cursor down', function() {
+        expect(this.dropdown.moveCursorDown).toHaveBeenCalled();
+      });
     });
 
-    it('should move the cursor down', function() {
+    it('should open the dropdown', function() {
       this.input.trigger('downKeyed');
 
-      expect(this.dropdown.moveCursorDown).toHaveBeenCalled();
+      expect(this.dropdown.open).toHaveBeenCalled();
     });
   });