"Using tag manager in conjunction with typeahead.js" breaks if you delete tags before adding new ones

[EleventyOne]

To reproduce:

(1) Go to the demo page: http://welldonethings.com/tags/manager/v3
(2) Go to "Using tag manager in conjunction with typeahead.js"
(3) Click in the 'tags' textbox
(4) Hit backspace three times so the existing tags are removed
(5) Type 'd' so 'Denmark' comes up
(6) Either pick 'Denmark' or just press enter (so 'd' is chosen)

The tag selected is not displayed properly and the spacing of the textbox is incorrect (shows up halfway through "Denmark"). If you continue to add tags they are spaced out properly but none of them are displayed.

This happens for me on the latest versions of both Chrome and FF.

[johnnyshields]

Confirmed this is an issue.

[awied]

Is there a workaround available?

[ldonnet]

You can try this to force tagsContainer, it works for me :

<form class="form-inline">
<span id="tagsContainer"></span>          
<input type="text" id="test" autocomplete="off" name="time_table[tag_search]" placeholder="Tags" style="width:9em;" class="input-medium tm-input tm-input-success" data-original-title=""/>
</form>

<script>
  tagApi = $("#test").tagsManager(
  {
    prefilled: items,
    output: '#tag_list',
    tagsContainer: '#tagsContainer'
  });

  var time_tables_tag_list = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: '<%= tags_referential_time_tables_path(@referential, :format => 'json') %>?tag=%QUERY',
  });

  time_tables_tag_list.initialize();

  $("#test").typeahead( null, {
                               name: 'time_tables_tag_list',
                               displayKey: 'name',
                               source: time_tables_tag_list.ttAdapter()
                             }).on('typeahead:selected', function (e, d) {

    tagApi.tagsManager("pushTag", d.value);

});

</script>

[chrislear]

This is an annoyance. Thanks for the workaround.