Tags get broken when clicking on label

[ancc]

Prerequisites

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed

💥 Demo Page

https://jsbin.com/hovosavawe/edit?html,js,output

Explanation

Start typing in input and hold down some key and the same time click on input label(still holding down the key).

• What is the expected behavior?
  tags not get broken
• What is happening instead?
  Tags get broken, result for example when holding down key "d"
  {"value":"{"value":"{\"value\":\"ddddddddddddddd\"}]dd"}]dddddddddddd"}]dddddddd
• What error message are you getting?
  no errors

[AaronAsAChimp]

This is also an issue if the input is located inside the label. The focus is moved to the (usually) hidden input immediately upon focusing the Tagify component. This causes the dropdown to close immediately.

Demo: https://jsbin.com/laquxiqeyi/1/edit?html,js,output

[yairEO]

@AaronAsAChimp - the JSBIN you posted seems to lack any modifications which showcases an issue

[yairEO]

@ancc - simply remove the for attribute in your HTML: <label for="text">Text</label>

It shouldn't/can't co-exist with Tagify

---

This is somewhat related to #1219

[AaronAsAChimp]

@yairEO I'm not sure what happened there. This bin should show the issue (I doubled checked it 😁). https://jsbin.com/nanapotihe/edit?html,js,output

Edit: Here is the code that causes the issue in case anything weird happens to the jsbin.

  <label>
  <input placeholder="type tags">
  </label>

var input = document.querySelector('input')
var tagify = new Tagify(input)

[yairEO]

Tagify cannot work with inputs which reside inside <Label> unless you manipulate the label so it won't point to the input:

<label for=''>

[AaronAsAChimp]

Thank you, I found something that works. Adding the following to my above example makes it work as expected. Could this or something similar be integrated into Tagify? If not that's ok, but I like the usability that the label provides.

function redirectFocus(e) {
  e.preventDefault()
  const tagifyInput = e.target.querySelector('.tagify__input');
 
  if (tagifyInput) {
    tagifyInput.focus();
  }
}

input.labels.forEach((label) => {
  label.addEventListener('click', redirectFocus);
})

[yairEO]

please use event delegation and do not bind an event on each individual element.

ask bard or chatGPT to convert it for you to event-delegated click event on all <label> elements and ask it to teach you what that is :)

you can also just do this in your redirectFocus function:

e.target.querySelector('.tagify__input')?.focus()

I don't want Tagify to directly mess with HTML elements in the page and prefer to leave that for developers to solve.