fixes #1219 - Tagify within a <label> element can't get focused as …

…the focus it shifted to the hidden original field

README.md

@@ -691,7 +691,7 @@ required          | <pre lang=html>`<input required>`</pre> | Adds a `required`
 
 
 ## Caveats
-- `<input>` wrapped in a `<label>` doesn't work - [#1219](https://github.com/yairEO/tagify/issues/1219)
+- `<input>` wrapped in a `<label>` doesn't work - [#1219](https://github.com/yairEO/tagify/issues/1219) and so Tagify internally sets the label's `for` attribute to an empty string, so clicking the Tagify component will not blur it and re-focus on the hidden input/textarea element Tagify is "connected" to
 
 ## FAQ
 List of questions & scenarios which might come up during development with Tagify:

src/tagify.js

@@ -263,7 +263,8 @@ Tagify.prototype = {
      * @param  {Object} input [DOM element which would be "transformed" into "Tags"]
      */
     build( input ){
-        var DOM  = this.DOM;
+        var DOM  = this.DOM,
+            labelWrapper = input.closest('label');
 
         if( this.settings.mixMode.integrated ){
             DOM.originalInput = null;
@@ -279,6 +280,10 @@ Tagify.prototype = {
             input.parentNode.insertBefore(DOM.scope, input)
             input.tabIndex = -1; // do not allow focus or typing directly, once tagified
         }
+
+        // fixes tagify nested inside a <label> tag from getting focus when clicked on
+        if( labelWrapper )
+            labelWrapper.setAttribute('for', '')
     },
 
     /**
@@ -287,6 +292,9 @@ Tagify.prototype = {
     destroy(){
         this.events.unbindGlobal.call(this)
         this.DOM.scope.parentNode.removeChild(this.DOM.scope)
+
+
+
         this.DOM.originalInput.tabIndex = this.DOM.originalInput_tabIndex
         delete this.DOM.originalInput.__tagify
         this.dropdown.hide(true)