Input field duplicated on dynamic field

[dre2004]

Hello,

I have run into an issue where my tag field keeps getting duplicated on a dynamic input field.

This is what happens:

I am showing the input field on a modal whos content gets automatically populated depending on which element a user clicks on.

Here is the html for the modal, ignore the curly braces that's the Jinja template tags.

<ul class="list-group">
    <li class="list-group-item list-group-item-primary" data-qid="{{q['_id']}}"
      data-toggle="modal" data-target="#questionModal" data-question="{{q['question']}}"
      data-explanation="{{q['explanation']}}" data-answer="{{q['answer']}}"
      data-tags="{{q['tags']|join(', ')}}" data-principals="{{q['principals']}}"><b>{{ q['question'] }}</b></li>
    <li class="list-group-item border-top-0 border-bottom-0"><b>Explanation: </b><p>{{ q['explanation'] }}</p></l>
...

I update the fields on the modal with an on click from that list item.

$("li[data-target='#questionModal']").on('click',function(){
	$("#delete_qid").val($(this).data('qid'));
	$("#qid").val($(this).data('qid'));
	$("#question").val($(this).data('question'));
	$("#explanation").val($(this).data('explanation'));
	$("#answer").val($(this).data('answer'));
	$("#tags").val($(this).data('tags'));
	tagin($("#tags")[0]);
});

And here is a snippet of the modal

 <div class="form-group col-12">
<label class="control-label" for="question">Question</label>
<input type="text" id="question" name="question" value="" class="form-control" style="width:100%" required="" aria-required="true">
<label class="control-label" for="explanation">Explanation</label>
<textarea type="text" id="explanation" name="explanation" class="form-control" required="" aria-required="true"></textarea>
<label class="control-label" for="answer">Answer</label>
<textarea type="text" id="answer" name="answer" class="form-control" required="" aria-required="true"></textarea>
<label class="control-label" for="tags">Tags</label>
<input type="text" id="tags" name="tags" value="" class="form-control tagin">
<input type="hidden" name="qid" id="qid" value="">
<input type="hidden" name="action" id="action" value="update">
 </div>

If I use the method shown in the example to update the tags field it works, but the old values stay there where I click on another list item (the rest of my fields update fine). I have been able to get it to update on every item, but the input field is then duplicated as shown in the screenshot.

Any ideas on how I can address this issue?

[darielvicedo]

I get to this library looking for a simple, dependency-free tags input, but now I'm running into the same error. It seems that this project has been abandoned... Did you find an alternative (non jQuery) to this?

[erwinheldy]

does this issue still occur if using tagin version 2

[kuai667]

Hi guys, I know I'm a year late but I found the way to fix this and just leaving the comment here for anyone who has the same issue.

In my case the problem was while having two different tagin fields in the same page, I tried adding them with different classes and that's where I had the duplicate field just like the picture. It seems that, in order to work well, the field must have the tagin class, so I just added it and instead of using querySelector when making the new Tagin in the script, i used getElementById.

Pictures:

This is the script, as you can see, instead of querySelector (as used in the examples of the lib) I used getElementById

And here is the HTML, as said before, it keeps the "tagin" class and uses the id to be called by the script.

Hope it works to you!!! Cheers,