Autocomplete requires you to click twice in iOS after update to 1.11.0

Question

Using jQuery 2.1.0 and jQuery.ui 1.11.0 Tested in iOS 7. iPhone and iPad Mini. Works on android and regular browsers.

The problem

We recently upgraded from jQuery UI 1.10.0 to 1.11.0 and now, when clicking an item in an autocomplete results list, you only get a hover, you have to click the same element again to get a click event. This used to work fine with version 1.10.0.

(JSFiddle link in comments)

What does not work

using css {cursor: pointer} does not work

using onclick="" does not work

(JSFiddle link in comments)

The weird part

But here comes the fun/weird part. It works in JSFiddle edit view, but not on the JSFiddle "/show" page.

JSFiddles: (type a letter to show results "s" is a good one)

Html view (does not work)
Edit view (works)

I've been working on this for days, but hadn't been able to reproduce it in JSFiddle before testing only the html view. So now I turn to you. I can't for the life of me figure out why the one page triggers a click event, and the other does not.

I am using the most basic function of jQuery autocomplete. In fact, using the exact same code that is presented on jQuery UI's home page.

The question

So, how do I get autocomplete to work with one click in iOS on the /show page?

(I will post additional links in comments because I don't have 10 rep yet. Unless I don't have enough rep to comment...)

Additional links: [jQuery UI Autocomplete home page](http://jqueryui.com/autocomplete/) | ["Fixes" that do not work](http://jsfiddle.net/35rmk2p6/3) | [jQuery UI version 1.10.0 where it works](http://jsfiddle.net/35rmk2p6/2) Please add "/show" to the end of the url when actually testing the behaviour. The edit view changes the behavior. — Snorre Kim, Aug 13 '14 at 12:53
Bug report for this issue: http://bugs.jqueryui.com/ticket/10544 — Asaph, Dec 14 '14 at 07:13

score 48 · Answer 1 · answered Dec 23 '14 at 15:02

48

Just a bit later, but

$("#input").autocomplete({
    open: function(event, ui) {
        $('.ui-autocomplete').off('menufocus hover mouseover mouseenter');
    }
});

answered Dec 23 '14 at 15:02

onlydimon

525
4
11

That also solved issue for selection , However it's will not file click of autocomplete input which i have registered at beginning. do you have any idea ? – Kaushik Thanki Nov 23 '15 at 06:53
3

Does not work with `autoFocus` set to `true`, because then always the first item is selected regardless of what you actually click on. Otherwise good workaround. – nachtigall Dec 23 '15 at 13:00
1

This "fix" is only breaking the autocomplete. Don't listen that answer. – Raphaël Malié Feb 09 '16 at 18:40
Thanks, this works for me especially i am using jquery tagit. – Ahesanali Suthar Jan 11 '17 at 12:38
1

@nachtigall any workarounds that work if `autoFocus` is `true`? – moondaisy Jan 23 '18 at 14:33
@moondaisy Cannot remember, but I upvote Sangram's answer (https://stackoverflow.com/a/32817003/1129950) so I might have used his approach. – nachtigall Jan 25 '18 at 10:19
This leaves the Keyboard open on an iPhone. and `blur` doesn't work in Safari, so there's no way to lose focus on the autocomplete. – gene b. Jan 25 '20 at 03:29

score 22 · Answer 2 · answered Sep 28 '15 at 06:39

22

For some strange reason @onlydimon's answer didn't work for me. It seems like we do need event mouseenter. Following answer worked well for me.

open: function (result) {

            if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
                $('.ui-autocomplete').off('menufocus hover mouseover');
            }
        },

I have added a condition to make sure that it doesn't break in other devices.

answered Sep 28 '15 at 06:39

Sangram Nandkhile

17,634
19
82
116

this did it for me. `menufocus` was the culprit on my end. although i only had to call off the one time, not every time it opened. was using autocomplete in react so i just put the `if` statement in `componentDidMount` and used a `ref` to grab the dom node. `$(this.refs.foo.getDOMNode()).autocomplete('widget').off('menufocus')` – PhilVarg Oct 05 '15 at 15:13
1

This works but it doesn't remove the Keyboard on the iPhone – gene b. Jan 25 '20 at 03:12

score 13 · Answer 3 · answered Sep 09 '15 at 17:37

13

Building on onlydimon’s solution:

var input = $("#input")
// Initialize autocomplete
input.autocomplete()
// Retrieve the autocomplete list and remove the mouseenter event
// which seems to trip up iOS Safari
input.autocomplete('widget').off('mouseenter')

I narrowed down the list of events to just jQuery's 'mouseenter' event. Removing just this one fixes the bug for me. Also, no need to remove it every time the list is opened; once is enough.

answered Sep 09 '15 at 17:37

fvsch

131
1
4

2

Does not work with `autoFocus` set to `true`, because then always the first item is selected regardless of what you actually click on. Otherwise good workaround. – nachtigall Dec 23 '15 at 13:00

score 3 · Answer 4 · answered Nov 12 '14 at 03:56

Wrote a super nasty hack which seems to do the trick for me. Here's what I did.

Check that we're using a touch device (in my case, a variable I have called IAmTouchy.
Listen for a tap (touchstart) on an autocomplete result.
After a set time, check to see if the autocomplete results are still visible. If they are, and an item is focussed, trigger a click on it.

(optional) Try once more... in case the set time wasn't long enough for the element to gain the ui-state-focus class.

    $('.autocompleteContainer').on('touchstart', 'li.ui-menu-item', function(){

        var $container = $(this).closest('.autocompleteContainer'),
            $item = $(this);

        //if we haven't closed the result box like we should have, simulate a click on the element they tapped on.
        function fixitifitneedsit() {
            if ($container.is(':visible') && $item.hasClass('ui-state-focus')) {

                $item.trigger('click');
                return true; // it needed it
            }
            return false; // it didn't
        }

        setTimeout(function () {
            if (!fixitifitneedsit()) {
                setTimeout(fixitifitneedsit, 600);
            }
        }, 600);
    });

Hopefully someone has a nicer solution though!

score 3 · Answer 5 · answered Feb 10 '17 at 15:44

$.ajax({
 url: '/ajax/xyz.json'
})
.done(function( data ) {
  $('#id').autocomplete({
    source: data,
    open: function( event, ui ) {
        if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
          $('.ui-autocomplete').off('menufocus hover mouseover mouseenter');
        }
    },
    select: function( event, ui ) {
      window.location.href = ui.item.value;
      return false;
    }
  });
});

This worked for me (works on drupal 8 as well). Now one tap on iOS devices redirect to search result page.

Thanks. It is the simplest solution in this thread. Works in iOS 10. open() function is the relevant part. — Alex Rogachevsky, May 15 '17 at 03:18

score 1 · Answer 6 · answered Feb 09 '16 at 22:39

Based on Liam Johnston solution, I wrote this one which work for me with autoFocus set to true:

var movedWhildAutocomplete = false;
$(document)
    .on('touchstart', '.ui-autocomplete li.ui-menu-item', function(){
        $(this).trigger('mouseenter');
        movedWhildAutocomplete = false;
    })
    .on('touchmove', '.ui-autocomplete li.ui-menu-item', function(){
        movedWhildAutocomplete = true;
    })
    .on('touchend', '.ui-autocomplete li.ui-menu-item', function(){
        if (!movedWhildAutocomplete) {
            var $el = $(this);
            if ($el.is(':visible') && $el.hasClass('ui-state-focus')) {
                $el.trigger('click');
            }
        }
        movedWhildAutocomplete = false;
    });

score 1 · Answer 7 · answered Jul 12 '17 at 20:07

Autocomplete widget has some built in events that you can add on to your code... jqueryui

I was having the same problem and finally figured out how to tweek the code and force mobile devices to respond with one click.

Basically for mobile devices (iOs) when you tap on the autocomplete list 'once', it will trigger the "focus" event, if you click once more (2nd click) it will read the event as "select". So in order to force iOs devices to select on one click you have to force it to select on the first click.

$("#input").autocomplete({
  source: yourSourceList,
  focus: function(event, ui) {
    $(this).val(ui.item.value);
    $(".ui-menu").hide(); //you can also console.log(ui.item.value); for the selected widget object
  }
});

Swapnil Man · Answer 8 · 2015-10-21T08:32:26.940

Use fastclick.js it will solve this problem. I know this js is used for removing 300ms tap delay but it solved this problem also for me.

Download the minified version of FastClick (alternatively, you can follow the instructions for installing the non-minified version here)
Include the file in your project:

<script src = "js/fastclick.min.js"></script>
Attach the FastClick object to the document after FastClick has been loaded:

var attachFastClick = Origami.fastclick;

attachFastClick(document.body);

NOTE: If you try using FastClick the non-minified way, i.e:

<script src = "js/fastclick.js"></script>;

Then use

FastClick.attach(document.body);

but are including the minified file you will receive errors (telling you that FastClick is undefined). If you are using the minified file you must access it through Origami.

score 0 · Answer 9 · answered Jan 22 '16 at 15:05

you can probably can use the focus event from autocomplete!

focus( event, ui )

$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];

  var selectAction = function(event, ui) {
    //do whatever you want with event and ui objects
    console.log(ui.item)
  }

  $("#tags").autocomplete({
    source: availableTags,
    focus: selectAction,
    select: selectAction
  });
});

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<label for="tags">Tags:</label>
<input id="tags">

score 0 · Answer 10 · answered Apr 15 '16 at 11:52

Solution from Raphaël Malié is almost perfect, but it needs evt.preventDefault() for touchend, otherwise it will generate a click on a link/button that is under clicked item.

    var movedWhildAutocomplete = false;
    $(document)
        .on('touchstart', '.ui-autocomplete li.ui-menu-item', function(){
            $(this).trigger('mouseenter');
            movedWhildAutocomplete = false;
        })
        .on('touchmove', '.ui-autocomplete li.ui-menu-item', function(){
            movedWhildAutocomplete = true;
        })
        .on('touchend', '.ui-autocomplete li.ui-menu-item', function(evt){
            if (!movedWhildAutocomplete) {
                var $el = $(this);
                if ($el.is(':visible') && $el.hasClass('ui-state-focus')) {
                    evt.preventDefault();
                    $el.trigger('click');
                }
            }
            movedWhildAutocomplete = false;
        });

score 0 · Answer 11 · answered May 12 '16 at 17:39

I´m working with jQuery UI with and cordova, and I have the same problem in the app, my solution for that problem is this:

$('.ui-autocomplete').mouseenter( function( e ){
    e.preventDefault();
    e.stopPropagation();
});

This stop the focus on the selected item.

score 0 · Answer 12 · answered Oct 24 '16 at 16:57

This code works with autoFocus

$("#input").autocomplete({
    source: ["Test 1", "Test 2", "Test 3", "Test 4", "Test 5"],
    autoFocus: true,
    focus: function(event, ui) {
        if (navigator.userAgent.match(/(iPod|iPhone|iPad)/) && event.bubbles) {
            $(this).data("ui-autocomplete")._trigger("select", "autocompleteselect", {item: ui.item} );
            $(this).autocomplete("close");
        }
        return false;
    },
    select: function(event, ui) {
        $(this).val(ui.item.label);
    }
});

Autocomplete requires you to click twice in iOS after update to 1.11.0

The problem

What does not work

The weird part

The question

12 Answers12

Linked

Related