Typeahead demo breaks after removing all tags

[jdorn]

Steps to reproduce: http://welldonethings.com/tags/manager/v3

1. Remove all pre-filled tags in the Using tag manager in conjunction with typeahead.js demo
2. Add a new tag

The newly added tag is missing a background color. Also, the typeahead pop-up is positioned incorrectly.

Tested in Chrome and Firefox. Works as expected for the other demos on the page.

[jordanful]

It appears as if the issue is related to how/where tags are appended to the DOM. When the prefilled option is used, tags appear before typeahead. When there are no prefilled options, tags appear within the typeahead div, causing layout issues.

[max-favilli]

Need to close #150 first, then I will look into this, thanks.

[Surt]

It happends to me when no prefilled tags are available too. Using tag manager in conjunction with typeahead.js

[Surt]

it seems, at least for me, that the strange behaviour happends because this:

<input type="text" disabled="" spellcheck="off" autocomplete="off" class="tt-hint" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; background: none repeat scroll 0% 0% rgb(255, 255, 255);">

I added some css and it seems to work fine now:

.tt-hint {
  background:none!important;
  display:none!important;
}

by the way: it's not possible to use the standar Bootstrap 3 classes to avoid redefinition of labels, inputs, etc?

[panSarin]

+1

also why if its not prefilled, input have transparent background?

[michaellwatson]

I changed line 145 of tagmanager.js
$self.parent().before($el);

Seemed like it was adding the tags into the tt-hint selector itself

[johnnyshields]

Can someone confirm @michaellwatson 's fix?

[michaellwatson]

This seemed to cause an issue if it was already prefilled, changed it to

opts = $self.data('opts')
if(opts.prefilled.length==0){
    $self.parent().before($el);
}else{
    $self.before($el);
}

[precisionpete]

The fix did not work for me. And for me it's broken regardless of a prefill. It is related to the first tag span being added in the wrong location though.

Specifying a tagsContainer DIV placed where I want it did solve the problem for me.

[cait08]

I had to filter it down from .tt-hint because otherwise it would remove the background from my other Typeahead field in my navbar:

.tt-hint.tm-input {
  background:none!important;
  display:none!important;
}

However, the suggestions still open in the wrong place as the field moves right.