Autocomplete: Must click two times to select an item in iOS

[Humpa]

First click on an item only sets class "ui-state-focus". Must click it again to actually select it.

This worked in version 1.10.0

A strange behavious is that in some cases the exact same code works:

• JSFiddle edit view (works): ​http://jsfiddle.net/35rmk2p6/4/

• The same JSFiddle, but now only the html view (does not work): ​http://jsfiddle.net/35rmk2p6/4/show

Bug reproduced on iPhone and iPad Mini with iOS 7

[tj.vantoll]

Confirmed and reduced: ​http://jsfiddle.net/tj_vantoll/35rmk2p6/5/.

The same behavior does not occur on Android. Very odd.

[Humpa]

Normally, for iOS, you should be able to put the style {cursor: pointer} or attribute onclick="" on a non <a href="url"> element and it should send a click. But even that seems to not work here.

[Scott González]

#11193 is a duplicate of this ticket.

[Humpa]

Replying to scott.gonzalez:

#11193 is a duplicate of this ticket.

Two thing of interest from this duplicate:

1. This bug is also on iOS 8.1
2. The theory that it works inside an iframe is supported by the fact that it works in jsfiddle edit view, but not in show view.

[fvsch]

I can confirm this bug. Been investigating it for a full day on one of our projects. :)

If you want another reduced testcase that shows the difference in behavior between iframe (click works) and no iframe (click doesn't work), you only have to look at:

​http://jqueryui.com/autocomplete/ and ​http://jqueryui.com/resources/demos/autocomplete/default.html

I spent most of the day looking for a bug in our own code, because I originally tested on the main demo page (iframe), and it worked, so I had ruled out jQuery UI Autocomplete as a culprit.

People discussing hacky fixes: ​http://stackoverflow.com/questions/25286685/autocomplete-requires-you-to-click-twice-in-ios-after-update-to-1-11-0

[gh7345 - khan]

I can confirm this bug on iPad with iOS 9.3.3. But the bug goes away if I comment out the following line in autocomplete's menufocus handler.

$( "<div>" ).text( label ).appendTo( this.liveRegion );

But I don't know what's wrong with that line.

[klmcdorm]

I think I found out why that line is causing this. According to ​https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html, iOS is first sending mouseover and mousemove events and then only sending a click event if the page's content doesn't change after the mousemove.

The menufocus event happens after mousing over the autocomplete's menu item, and that line in the handler adds content to the page, so no click event happens. I tried delaying changing the liveRegion and that seems to work.