Improve usability of setVal. Fixes twitter#646.

jharding · Mar 8, 2014 · 5cca86a · 5cca86a
1 parent f1b18d9
commit 5cca86a
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 14 deletions.
diff --git a/src/typeahead/plugin.js b/src/typeahead/plugin.js
@@ -70,21 +70,21 @@
     val: function val(newVal) {
       // mirror jQuery#val functionality: reads opearte on first match,
       // write operates on all matches
-      return !arguments.length ? getQuery(this.first()) : this.each(setQuery);
+      return !arguments.length ? getVal(this.first()) : this.each(setVal);
 
-      function setQuery() {
+      function setVal() {
         var $input = $(this), typeahead;
 
         if (typeahead = $input.data(typeaheadKey)) {
-          typeahead.setQuery(newVal);
+          typeahead.setVal(newVal);
         }
       }
 
-      function getQuery($input) {
+      function getVal($input) {
         var typeahead, query;
 
         if (typeahead = $input.data(typeaheadKey)) {
-          query = typeahead.getQuery();
+          query = typeahead.getVal();
         }
 
         return query;

diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js
@@ -20,6 +20,7 @@ var Typeahead = (function() {
       $.error('missing input');
     }
 
+    this.isActivated = false;
     this.autoselect = !!o.autoselect;
     this.minLength = _.isNumber(o.minLength) ? o.minLength : 1;
     this.$node = buildDomStructure(o.input, o.withHint);
@@ -63,6 +64,8 @@ var Typeahead = (function() {
       // ie 9+ and other browsers
       $e.preventDefault();
     });
+
+    this._setLanguageDirection();
   }
 
   // instance methods
@@ -111,10 +114,12 @@ var Typeahead = (function() {
     },
 
     _onFocused: function onFocused() {
+      this.isActivated = true;
       this.dropdown.open();
     },
 
     _onBlurred: function onBlurred() {
+      this.isActivated = false;
       this.dropdown.empty();
       this.dropdown.close();
     },
@@ -265,12 +270,23 @@ var Typeahead = (function() {
       this.dropdown.close();
     },
 
-    getQuery: function getQuery() {
-      return this.input.getQuery();
+    setVal: function setVal(val) {
+      this.input.clearHint();
+
+      if (this.isActivated) {
+        this.input.setInputValue(val);
+      }
+
+      else {
+        this.input.setQuery(val);
+        this.input.setInputValue(val, true);
+      }
+
+      this._setLanguageDirection();
     },
 
-    setQuery: function setQuery(val) {
-      this.input.setInputValue(val);
+    getVal: function getVal() {
+      return this.input.getQuery();
     },
 
     destroy: function destroy() {

diff --git a/test/typeahead_view_spec.js b/test/typeahead_view_spec.js
@@ -155,6 +155,12 @@ describe('Typeahead', function() {
   });
 
   describe('when input triggers focused', function() {
+    it('should activate the typeahead', function() {
+      this.input.trigger('focused');
+
+      expect(this.view.isActivated).toBe(true);
+    });
+
     it('should open the dropdown', function() {
       this.input.trigger('focused');
 
@@ -163,6 +169,12 @@ describe('Typeahead', function() {
   });
 
   describe('when input triggers blurred', function() {
+    it('should deactivate the typeahead', function() {
+      this.input.trigger('blurred');
+
+      expect(this.view.isActivated).toBe(false);
+    });
+
     it('should empty the dropdown', function() {
       this.input.trigger('blurred');
 
@@ -510,21 +522,29 @@ describe('Typeahead', function() {
     });
   });
 
-  describe('#getQuery', function() {
+  describe('#getVal', function() {
     it('should return the current query', function() {
       this.input.getQuery.andReturn('woah');
       this.view.close();
 
-      expect(this.view.getQuery()).toBe('woah');
+      expect(this.view.getVal()).toBe('woah');
     });
   });
 
-  describe('#getQuery', function() {
-    it('should update the input value', function() {
-      this.view.setQuery('woah');
+  describe('#setVal', function() {
+    it('should update query', function() {
+      this.view.isActivated = true;
+      this.view.setVal('woah');
 
       expect(this.input.setInputValue).toHaveBeenCalledWith('woah');
     });
+
+    it('should update query silently if not activated', function() {
+      this.view.setVal('woah');
+
+      expect(this.input.setQuery).toHaveBeenCalledWith('woah');
+      expect(this.input.setInputValue).toHaveBeenCalledWith('woah', true);
+    });
   });
 
   describe('#destroy', function() {