div with class bootstrap-tagsinput generated twice causes a bad page view with typeahead

[aleinnocenzi]

I'm using bootstrap-tagsinput with typeahead with the following code:

`

var tags = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: window.location.href + "&control=TagControl&method=LoadTags&query=%QUERY",
        wildcard: "%QUERY",
        filter: function (list) {
            return $.map(list, function (tagname) {
                return { name: tagname };
            });
        },
        cache: false
    }
});
tags.initialize();

$('.bootstrap-tagsinput input').tagsinput({
    typeaheadjs: {
        name: 'tags',
        displayKey: 'name',
        valueKey: 'name',
        source: tags.ttAdapter()
    }
});`

The typeahead works correctly but if I inspect the html generated I see this:

As you can see the div with class bootstrap-tagsinput is generated twice and this causes a bad view in the page:

What am I doing wrong? Thanks.

EDIT: In the javascript I use tagsinput on $(".bootstrap-tagsinput input") selector because if I use only $("#inputTags"), where "inputTags" is the id of my input element, the typeahead doesn't work

[mantey-github]

@aleinnocenzi has your issue been solved. Facing the same issue

[alphadevx]

I have the same issue, have not found a workaround yet.

[jerrywilborn]

There is a double-initialization. Anything with a data-role of 'tagsinput' will get constructed, then you are calling it a second time. The solution is to remove the data-role since you are initializing it manually.