Opened 5 years ago

Last modified 3 years ago

#10544 open bug

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

Change History (7)

comment:1 Changed 5 years ago by tj.vantoll

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.

comment:2 Changed 5 years ago by 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.

comment:3 Changed 5 years ago by Scott González

#11193 is a duplicate of this ticket.

comment:4 in reply to:  3 Changed 5 years ago by 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.

comment:5 Changed 4 years ago by 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

comment:6 Changed 3 years ago by 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.

comment:7 Changed 3 years ago by 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.

Note: See TracTickets for help on using tickets.