Skip to main content

Search and Top Navigation

#10544 open bug ()

Opened August 13, 2014 01:45PM UTC

Last modified March 27, 2017 03:32PM UTC

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

Reported by: Humpa Owned by:
Priority: minor Milestone: none
Component: ui.autocomplete Version: 1.11.0
Keywords: Cc:
Blocked by: Blocking:
Description

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:

Bug reproduced on iPhone and iPad Mini with iOS 7

Attachments (0)
Change History (7)

Changed August 13, 2014 06:27PM UTC by tj.vantoll comment:1

status: newopen
summary: Most click two times to select an item in iOSAutocomplete: Must click two times to select an item in iOS

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

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

Changed August 14, 2014 08:33AM UTC by Humpa comment:2

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.

Changed February 23, 2015 01:35PM UTC by scottgonzalez comment:3

#11193 is a duplicate of this ticket.

Changed February 23, 2015 03:16PM UTC by Humpa comment:4

Replying to [comment:3 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.

Changed September 09, 2015 02:57PM UTC by fvsch comment:5

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

Changed August 04, 2016 10:10AM UTC by gh7345 comment:6

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.

Changed March 27, 2017 03:32PM UTC by klmcdorm comment:7

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.