4

We are using google's places-autocomplete plugin on our website.

Of late we have received several complaints from our website visitors that this plugin isn't working in the Android version of Firefox. It works fine in the desktop version of Firefox however.

The problem can be simply observed by

  1. Going to the places-autocomplete example here
  2. Trying to enter a zip code in the "Enter a location" search input

You will observe the following 2 issues -

  1. Google Auto-complete should show suggestions as you start typing the zip code. But it doesn't until one types a space or , after the 5 digit zip code.
  2. When the suggestions do show up (after typing space or ,), you can't choose the first suggestion. As you tap on it, the cursor moves back to the search input. You can however choose the second or third suggestion correctly.

Problem #2 is extremely annoying and frustrating for the user. We've had received several complaints about this.

I have confirmed this on Firefox version 36.0.2 on a Samsung S4 running Android 4.4.2.

How can this be resolved?

Chait
  • 1,052
  • 2
  • 18
  • 30
Maverick
  • 61
  • 3
  • 10
  • Can someone please confirm this? I'm sure google's auto places api is pretty widely used. I would appreciate any inputs or suggestions for a workaround.Thanks! – Maverick Mar 23 '15 at 12:34
  • Can someone suggest a way to debug this? Similar to Chrome's device emulation tools.. Is there something equivalent for Firefox - so I can see what error messages are thrown in Android emulation mode. I tried using the "User Agent Switcher" extension in Firefox but that didnt get me too far. Will appreciate your inputs! Thanks. – Maverick Mar 27 '15 at 12:41
  • I am seeing the same behavior on newer versions of android and FF. Your first issue is probably the same as http://stackoverflow.com/questions/14194247/key-event-doesnt-trigger-in-firefox-on-android-when-word-suggestion-is-on – steven Apr 13 '15 at 16:09
  • Thanks Steven! It certainly seems to be a similar issue. Any idea how to incorporate the input event in the Places Autocomplete js code? – Maverick Apr 13 '15 at 20:23
  • 1
    Nope, I doubt there is any reasonable way to do that given how minified and complicated their code is. Currently investigating hacks like "after each character the user types, insert a space and immediately delete it". But I'm not holding my breath – steven Apr 13 '15 at 21:48
  • Thats an interesting idea Steven. Let me know if you come up with something to try out. – Maverick Apr 14 '15 at 12:45
  • 1
    No it didn't help. But the second problem can be worked around by adding a margin to the first element. Its ugly but at least its functional. `.FirefoxAndroid .pac-container .pac-item:first-child { margin-top: 20px; `} – steven Apr 14 '15 at 17:55
  • Steven - Thats an excellent workaround for problem #2. Not pretty but works.. The only problem is limiting this only to Firefox Android browser. Unfortunately ".FirefoxAndroid" doesnt work. http://jsfiddle.net/Y4WgX/192/ Any suggestions? Thanks again! – Maverick Apr 14 '15 at 20:43
  • 1
    Oh sorry I forgot the JS. Its just a few lines, basically check the user agent for "firefox" and "android". It might not be perfect but it will solve more problems than it causes. `` – steven Apr 15 '15 at 17:33
  • Thanks Steven! That works great. You should consider "answering" this question. I will accept it. Others will find this workaround useful! – Maverick Apr 15 '15 at 17:57
  • as of December 2015 this is still a problem and one that you can't emulate via the firefox browser 'Responsive Design Mode'. Still searchning for a fix for the first problem, i.e.not being able to select the first option. very annoying. – luke_mclachlan Dec 31 '15 at 09:41

2 Answers2

1

A work around for the second issue is to give the first autocomplete suggestion a top margin so the user can click it. Its not pretty but its functional.

css

.FirefoxAndroid .pac-container .pac-item:first-child { 
    margin-top: 20px;
}

js

<script> 
    var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;     
    var is_android = navigator.userAgent.toLowerCase().indexOf('android') > -1; 

    if(is_firefox && is_android){ 
        $('html').addClass('FirefoxAndroid');
    }
</script>
steven
  • 646
  • 4
  • 8
0

I encountered the same issue today - the website I am working on is working perfectly on every web browser, the auto-complete as well except on FF mobile.

After trying 3-4 solutions the one that worked for me was to declare the var place at the top of my code.

I have something like that 

var autocomplete;
var place;
var input = document.getElementById('location');
var options = {
    componentRestrictions: {'country':'be'},
    types: ['(regions)'] // (cities)
};

autocomplete = new google.maps.places.Autocomplete(input,options);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
    place = autocomplete.getPlace();
    ...
}

It was not working only on FF mobile because I wasn't declaring place at the top.

Maybe it will help someone in the future who knows

Chait
  • 1,052
  • 2
  • 18
  • 30
Marcel Powolny
  • 61
  • 6