typeahead: dynamic data binding and re-initializing bloodhound object moves focus out of Textbox.

[samirshah1187]

If I am using this directive and I am re-initializing bloodhound object, textbox looses it's focus and then I have to again re-focus manually. Issue with this is basically we are using template for RWD and for IPhone's when it looses focus out it closes the keyboard and again on manual re-focus it opens, so it's showing a flickering issue of closing and opening of KeyBoard.

Anyone has faced this issue? Any idea how can we avoid this?

[hmil]

If you hot-swap the bloodhound object, the HTML markup for the typeahead will be regenerated and you will lose focus, this is the expected behavior.
Maybe you should look into ways to achieve what you want to do without replacing bloodhound. Can you detail your use case?

[samirshah1187]

I have this function which replaces/re-initialize my bloodhound object.

function updateNumberList($event) {
    if (self.headerSearch.length == 1) {
        headerNavService.getQuickSearchData(self.headerSearch).then(
            function(data) {
                if ((data.spellcheck.suggestions[1]) == null) {
                    console
                        .log("NO SEARCH FOUND.PLEASE ENTER CORRECT SEARCH TERMS.");
                } else if (data.spellcheck.suggestions[1].suggestion) {
                    angular.forEach(
                        data.spellcheck.suggestions[1].suggestion,
                        function(
                            suggestion) {
                            var sug = {
                                num: suggestion
                            };
                            self.quickSearchData
                                .push(sug);
                        });
                    var bloodHoundSuggestion = new Bloodhound({
                        datumTokenizer: function(d) {
                            return Bloodhound.tokenizers.whitespace(d.num);
                        },
                        queryTokenizer: Bloodhound.tokenizers.whitespace,
                        local: self.quickSearchData
                    });
                    self.searchDataset = {
                        displayKey: 'num',
                        name: 'numbers',
                        source: bloodHoundSuggestion
                    };
                }

                if ($('#headerSearch #searchInput').is(":visible")) {
                    setTimeout(function() {
                        $('#headerSearch #searchInput').focus().setCursorPosition(self.headerSearch.length);
                    }, 10);
                } else if ($('.side-menu-search #sideSearchInput').is(":visible")) {
                    setTimeout(function() {
                        $('.side-menu-search .searchInput').focus().setCursorPosition(self.headerSearch.length);
                    }, 20);
                }
            });
    }
    $event.stopImmediatePropagation();
}

It's little mess but that's what one of the developer achieved.

edited please use proper formatting when you post code in comments

[hmil]

Hi,

I'm not sure pasting a blob of code really helps here. What I mean is that rather than focusing on implementation details, take a step back and reconsider why you want to change the bloodhound object.
Given the amazing possibilities offered by bloodhound, I can't think of a use-case where you'd have to swap the bloodhound object associated to a typeahead input while it's being typed into.

Look for a way to achieve what you want to do without replacing the bloodhound object. I can't tell you how to do it if I don't know what you want to do in the first place. If you can't find a solution in the doc, StackOverflow is your best bet.

Also if you do find a solution, feel free to share both your problem and the solution you came up with as it may help other users as well.