Remove change event handler because autocomplete double enters token

bootstrap-tokenfield.jquery.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-tokenfield",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "title": "bootstrap-tokenfield",
   "author": {
     "name": "ragulka",

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "bootstrap-tokenfield",
   "description": "Advanced tagging/tokenizing plugin for input fields with a focus on keyboard and copy-paste support.",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "authors": [
     {
       "name": "ragulka",
@@ -37,4 +37,4 @@
     "chai": "~1.7.*",
     "typeahead.js": "~0.10.1"
   }
-}
+}

dist/bootstrap-tokenfield.js

@@ -192,7 +192,6 @@
       args[0] = $.extend( {}, defaults, args[0] )
 
       this.$input.typeahead.apply( this.$input, args )
-      this.$hint = this.$input.prev('.tt-hint')
       this.typeahead = true
     }
   }
@@ -269,9 +268,11 @@
           parseInt($tokenLabel.css('margin-right'), 10)
       }
 
-      $tokenLabel
-        .text(attrs.label)
-        .css('max-width', this.maxTokenWidth)
+      $tokenLabel.css('max-width', this.maxTokenWidth)
+      if (this.options.html)
+        $tokenLabel.html(attrs.label)
+      else
+        $tokenLabel.text(attrs.label)
 
       // Listen to events on token
       $token
@@ -311,17 +312,20 @@
       }
 
       // Update tokenfield dimensions
-      this.update()
+      var _self = this
+      setTimeout(function () {
+        _self.update()
+      }, 0)
 
       // Return original element
       return this.$element.get(0)
     }
 
   , setTokens: function (tokens, add, triggerChange) {
-      if (!tokens) return
-
       if (!add) this.$wrapper.find('.token').remove()
 
+      if (!tokens) return
+
       if (typeof triggerChange === 'undefined') {
           triggerChange = true
       }
@@ -380,12 +384,19 @@
     return this.$input.val()
   }
 
+  , setInput: function (val) {
+      if (this.$input.hasClass('tt-input')) {
+          // Typeahead acts weird when simply setting input value to empty,
+          // so we set the query to empty instead
+          this.$input.typeahead('val', val)
+      } else {
+          this.$input.val(val)
+      }
+  }
+
   , listen: function () {
       var _self = this
 
-      this.$element
-        .on('change',   $.proxy(this.change, this))
-
       this.$wrapper
         .on('mousedown',$.proxy(this.focusInput, this))
 
@@ -628,12 +639,6 @@
       }
     }
 
-  , change: function (e) {
-      if ( e.initiator === 'tokenfield' ) return // Prevent loops
-
-      this.setTokens( this.$element.val() )
-    }
-
   , createTokensFromInput: function (e, focus) {
       if (this.$input.val().length < this.options.minLength)
         return // No input, simply return
@@ -644,13 +649,7 @@
       if (tokensBefore == this.getTokensList() && this.$input.val().length)
         return false // No tokens were added, do nothing (prevent form submit)
 
-      if (this.$input.hasClass('tt-input')) {
-        // Typeahead acts weird when simply setting input value to empty,
-        // so we set the query to empty instead
-        this.$input.typeahead('val', '')
-      } else {
-        this.$input.val('')
-      }
+      this.setInput('')
 
       if (this.$input.data( 'edit' )) {
         this.unedit(focus)
@@ -881,12 +880,11 @@
         }
 
         this.$input.width( mirrorWidth )
-
-        if (this.$hint) {
-          this.$hint.width( mirrorWidth )
-        }
       }
       else {
+        //temporary reset width to minimal value to get proper results
+        this.$input.width(this.options.minWidth);
+
         var w = (this.textDirection === 'rtl')
               ? this.$input.offset().left + this.$input.outerWidth() - this.$wrapper.offset().left - parseInt(this.$wrapper.css('padding-left'), 10) - inputPadding - 1
               : this.$wrapper.offset().left + this.$wrapper.width() + parseInt(this.$wrapper.css('padding-left'), 10) - this.$input.offset().left - inputPadding;
@@ -895,10 +893,6 @@
         // dimensions returned by jquery will be NaN -> we default to 100%
         // so placeholder won't be cut off.
         isNaN(w) ? this.$input.width('100%') : this.$input.width(w);
-
-        if (this.$hint) {
-          isNaN(w) ? this.$hint.width('100%') : this.$hint.width(w);
-        }
       }
     }
 
@@ -1010,6 +1004,7 @@
   $.fn.tokenfield.defaults = {
     minWidth: 60,
     minLength: 0,
+    html: true,
     allowEditing: true,
     allowPasting: true,
     limit: 0,

js/bootstrap-tokenfield.js

@@ -383,7 +383,7 @@
   , getInput: function() {
     return this.$input.val()
   }
-      
+
   , setInput: function (val) {
       if (this.$input.hasClass('tt-input')) {
           // Typeahead acts weird when simply setting input value to empty,
@@ -397,9 +397,6 @@
   , listen: function () {
       var _self = this
 
-      this.$element
-        .on('change',   $.proxy(this.change, this))
-
       this.$wrapper
         .on('mousedown',$.proxy(this.focusInput, this))
 
@@ -642,12 +639,6 @@
       }
     }
 
-  , change: function (e) {
-      if ( e.initiator === 'tokenfield' ) return // Prevent loops
-
-      this.setTokens( this.$element.val() )
-    }
-
   , createTokensFromInput: function (e, focus) {
       if (this.$input.val().length < this.options.minLength)
         return // No input, simply return
@@ -893,7 +884,7 @@
       else {
         //temporary reset width to minimal value to get proper results
         this.$input.width(this.options.minWidth);
-        
+
         var w = (this.textDirection === 'rtl')
               ? this.$input.offset().left + this.$input.outerWidth() - this.$wrapper.offset().left - parseInt(this.$wrapper.css('padding-left'), 10) - inputPadding - 1
               : this.$wrapper.offset().left + this.$wrapper.width() + parseInt(this.$wrapper.css('padding-left'), 10) - this.$input.offset().left - inputPadding;

package.json

@@ -2,7 +2,7 @@
   "name": "bootstrap-tokenfield",
   "title": "Bootstrap Tokenfield",
   "description": "Advanced tagging/tokenizing plugin for input fields with a focus on keyboard and copy-paste support.",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "main": "dist/bootstrap-tokenfield.js",
   "homepage": "http://sliptree.github.io/bootstrap-tokenfield/",
   "author": {