bassjobsen/Bootstrap-3-Typeahead

Drop down item selected would be inserted wrong item

jojohappy opened this issue · 0 comments

Hi folks,

I happened an annoying problem, here is the source related issue: link. If we have a long list of items (over the screen) and scroll to find the right item, select the item would insert a different item name into input element, not the correct item that was selected.

I had testing in my laptop that it would be hit in Chrome 74.0.3729.169, but Firefox 67.0.4 and Safari 12.1.1 were fine. I tried to deep dive, and found a potential cause follow:

blur: function (e) {
    if (!this.mousedover && !this.mouseddown && this.shown) {
        if (this.selectOnBlur) {
            this.select();
        }
        this.hide();
        this.focused = false;
        this.keyPressed = false;
    } else if (this.mouseddown) {
        // This is for IE that blurs the input when user clicks on scroll.
        // We set the focus back on the input and prevent the lookup to occur again
        this.skipShowHintOnFocus = true;
        this.$element.focus(); // Here would be triggered the mouseleave and mouseenter event before click event triggered
        this.mouseddown = false;
    }
},

If I remove the line of this.$element.focus();, It will be fine in my Chrome. But I don't know why it will trigger the mouseleave and mouseenter event in Chrome. Sorry for I don't familiar with the events for Chrome, if somebody could help me, it will be appreciated. Thank you!