Can't select value on Safari

[gaetanhauray]

Hi, On safari (5.1.7), I can't select a value from the autocompleted list, when I try, the list just close without trigger event attached in _Open() method.

I search for reason and I found this : I think when I click on a choice (a <li>), blur event of element <input> is trigger BEFORE my click, so the autocomplete list closed immediately, and my click didn't "hit" my <li>.

I fix this problem by forcing delay before close my list _Blur: function (now) { setTimeout(function () { this.DOMResults.setAttribute("class", "autocomplete"); }.bind(this), 150); }

[benoitongit]

Same here, Safari and Chrome have this issue

[alpae]

+1 (chrome on macosx) but the proposed fix doesn't work either. no problem with safari and firefox though

[baptistedonaux]

Currently, I tested to reproduce this fail on the documentation with these browsers.

• [x] Firefox Linux - no problem with version 54
• [x] Firefox Mac OS X - no problem with version 51
• [ ] Firefox Windows
• [x] Chromium Linux - no problem with version 56
• [x] Chrome Mac OS X - no problem with version 56
• [ ] Chrome Windows
• [x] Safari - no problem with version 10
• [ ] Edge
• [ ] Internet Explorer 9
• [ ] Internet Explorer 10
• [ ] Internet Explorer 11

I keep to investigate this problem to know if this issue concern only macOS.

[eliasgonzalezugalde]

I'm having the same issue with Chrome on Windows. :(

[1u0n]

I was facing the same problem, on Firefox+Windows.

In my case, I realized it had to do with <li> elements with long text, so that if in the list there is at least one element whose text breaks in 2 lines, clicking on the list elements will behave strangely.

I solved it adding this style

.autocomplete li {
    white-space: nowrap;
}

so now every element takes only 1 line no matter how long its text.

Of course this is just a part of the solution, because now long text won't appear fully. Whole solution could be to make the .autocomplete {display:inline-block} so it'll stretch to wrap all the content, or anything else you guys come up with.

I haven't made any PR because I'm not sure everyone's problem is really caused by this, maybe it's just me.

[baptistedonaux]

@1u0n Thanks your solution. If this problem can be solved by a specific CSS rule, ping me !

[baptistedonaux]

Lot of time has passed since opening this issue. I can't reproduce but may people seems have this frustrating problem. So, I have deployed a patch (2.7.1) which integrate the solution given by @1u0n.

Thanks for your help !

[gurgeous]

I am experimenting with autocompletejs today to see if it is right for my project. I encountered the issue as well in Chrome 68.0.3440.106. The nowrap change didn't help, but the original suggestion from @gaetanhauray (delay the blur) fixed the problem.

[gurgeous]

I agree with the assessment above - the blur fires before the click, thereby closing the autocomplete instantly. The now variable will be set to the FocusEvent in this case.

[pulzarraider]

I can confirm this bug on Firefox 62 and Chrome 69 (both Win). This is critical problem of this library. Solution - change the condition checking the void 0:

    _Blur: function (now) {
        if (now !== true) { now = false; }
        if (now) {
            this._Close();
        }
        else {
            var params = this;
            setTimeout(function () {
                params._Blur(true);
            }, 150);
        }
    },

[matthieu2607]

Hi, I have this problem with Chrome 71 and Ubuntu and the nowrap solution does not change anything. However, the @gaetanhauray solution also corrected me the bug (delay the blur)

[picks44]

Same issue on Chrome (Windows), fixed with the @gaetanhauray solution.

[GEp1c]

@gaetanhauray thank you for your fix! works like a charm now :)