Not working in mobile Android browser

[karsunke]

I tried horsey on several devices. It works in every Desktop browser I tested. Also on iOS browsers. But there seems to be a problem with the mobile Android browser (Chrome).

Typing in the box does not fire any events. No list is shown. I debugged it and there is no error message. You can test it at the sample page http://bevacqua.github.io/horsey/

[karsunke]

I managed to find a workaround. Just add a keydown event listener and call the methods hide and show. With jQuery it looks like this:

var jElement = $("#address-search");
jElement.keydown(function() {
    horseyElement.hide();
    horseyElement.show();
})

[bevacqua]

Is this still the case?

[karsunke]

Yep. Still the same. I tried it again with the latest Android Chrome Browser.

[akrawchyk]

@karsunke thanks for the workaround!

Although, it does ruin UX/accessibility since the user can no longer navigate the autocomplete list via the keyboard. The workaround hides then shows the list again on arrow press, which resets the selection item.

[akrawchyk]

@karsunke this does the same except maintains the user's ability to navigate the list via keyboard arrows:

var KEY_UP = 38;
var KEY_DOWN = 40;
var jElement = $("#address-search");
jElement.keyup(function(e) {
  if (!e.keyCode === KEY_UP && !e.keyCode === KEY_DOWN) {
    horseyInstance.hide();
    horseyInstance.show();
  }
});

[karsunke]

@akrawchyk Thanks for the addition.

[zspitzer]

Alas, Chrome is pretty painful with keydown events and soft keyboards, here is the WONTFIX bug from 2012 with 259 comments! https://bugs.chromium.org/p/chromium/issues/detail?id=118639

Solution might be to use the newer "input" rather than keydown event which is supported by everything since IE9 https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/oninput

[beatfreaker]

Hi @karsunke i am facing the same issue can you please help me out. I tried your approach but i didn't got what horseyElement should be.

can you please give me an example?

var horseyElement = horsey(document.querySelector('#profile-cities'), {
    source: function(data, done) {;
    }
});
jQuery('#profile-cities').keydown(function() {
    horseyElement.hide();
    horseyElement.show();
});

this is my code, can you please correct the code and tell me where i am going wrong?