From 859fca46ddd59ff401f00bce09f0a56951a65bfb Mon Sep 17 00:00:00 2001
From: Yair Even Or <vsync.design@gmail.com>
Date: Wed, 7 Feb 2024 16:43:34 +0100
Subject: [PATCH] fixes #1219 - Tagify within a `<label>` element can't get
 focused as the focus it shifted to the hidden original field

---
 README.md     |  2 +-
 src/tagify.js | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index a81e2726..bcdc7184 100644
--- a/README.md
+++ b/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:
diff --git a/src/tagify.js b/src/tagify.js
index 3fc1bbb8..688253de 100644
--- a/src/tagify.js
+++ b/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)