When ngAutocomplete doesn't work on mobile (iOS, iPad, ...)

Oscar Brito

ngAutocomplete is an angular directive that allows you to create an autocomplete textbox for addresses using google places API.

ngAutocomplete example

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

<input type="text" class="form-control" id="originAddress"  
                placeholder="Street address"
                ng-model="originAddress"
                details="origin"
                options="boundaries"
                autocomplete="off" 
                autocorrect="off" 
                autocapitalize="off" 
                spellcheck="false"
                ng-autocomplete
                required>

Mobile browser selection bug

"Oscar I can't select the address using a mobile phone, can you please take a look?"

This week a bug hunted me for a few hours where the ngAutocomplete options failed to click on mobile browsers.

If you're facing the same problem the solution is to avoid the touchend event propagation at the pac-container container level.

$('.pac-container').on('touchend', function(e){
    e.stopPropagation();
});

Before applying the solution be sure that you create a reusable angular directive. Keep your code nice and tidy!

Oscar out.