<input> wrapped in a <label> doesn't work

[jjonescz]

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/fegocotaju/1/edit?html,js,output

<label>
    Label:
    <input />
</label>

Explanation

• What is the expected behavior? I would expect it to work normally, it's just slightly modified basic example. This alternative works fine:

  <label for="tags">Label:</label>
  <input id="tags" />

• What is happening instead? The tags input cannot be focused, the underlying text box is focused instead. If I type something anyway, the UI breaks:
  

• What error message are you getting? None.

[yairEO]

well, it's something developers should change in their own HTML structure I guess.

[jjonescz]

Perhaps it could be at least documented as unsupported. It's not obvious.

[yairEO]

@jjonescz - updated the README and will be visible soon when I deploy a new version

[dmx-patrick]

I know this issue is already closed, but why not change the original input to type="hidden". This makes it hidden and prevents the focus to it and it still is being submitted with the form. It should fix this issue and the extra css to make the original input hidden is not needed.

[yairEO]

@dmx-patrick - type="hidden" is not an attribute supported by textarea tags (which tagify works with in mixed-mode). I've fixed this by setting for='' attribute to an empty string to bypass it's default functionality for focusing whatever form field is inside it. Fix will be published in next verion.