Google Places Autocomplete plugin isnt working in

Question

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?

Answer 1

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

Answer 2

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>