Problem with google places and IOS

ionic-v1
1

I installed already two directives of google places when I start typing and click on the result in IOS list disappears and nothing happens
This is one example that I have installed: http://jsfiddle.net/P3c7c/1/

Thanks!

1 Like
2

I’ve got the same problem on android. I tried using data-tap-disabled=“true” on the google places div but then the results won’t even disappear.

However, no problems on the desktop.

3

I also have the problem on iOS 7. After adding data-tap-disabled=true manually to the pac-container and backdrop DOM elements from the Google Places API, a place from the selection list can be selected and place_changed event is fired when the select popover is closing.

Here is the code I added after initializing places.Autocomplete. SetTimeout to be sure the places elements are already added to the DOM:

setTimeout(function() {
    document.getElementsByClassName('backdrop')[0].setAttribute('data-tap-disabled', true);
    document.getElementsByClassName('pac-container')[0].setAttribute('data-tap-disabled', true);
}, 500);

After researching and trying for hours that was the best solution I could find, but still not satisfying. Hope someone has found something better or the Ionic team can provide a solution.

4

Any news about a better solution?

5

I’ve just set this directive: https://github.com/israelidanny/ion-google-place

Awesome!! Autocomplete 100% compatible with Ionic :wink:

1 Like
6

Just in case others still run into this problem. My solution is in this gist. It works for me on a few Android devices and the iPhone 6.

Background

  • To make apps more responsive, ionic framework by default removes the 300ms delay imposed by mobile browsers. This removal interferes with google places autocomplete’s dropdown selection. To make the dropdown work again, we must attach the attribute data-tap-disabled to the dropdown container so ionic knows to skip the 300ms removal.

  • The autocomplete dropdown container div.pac-container happens to be dynamically generated so we can’t hardcode data-tap-disabled to it.

Solution
The idea is to setup keyframe animation on div.pac-container. When that element is generated by the google maps code, the animationstart event will be triggered. We setup a handler to do 2 things:

  1. Attach data-tap-disabled to div.pac-container to skip ionic’s handling of the 300ms delay.
  2. Blur the autocomplete input so that google closes the dropdown and fires the place_changed to give us place data.

Alternatives that don’t work as well

  • setTimeout is not always reliable mainly because there is no way to tell how long it takes google maps to finish loading and create pac-container. For UX reason, we also don’t want the timer to be longer than necessary.
  • Intervals and repeating timeouts while checking for the existence of .pac-container until it is created. For some reason, this caused frequent crashing of my hybrid app when places-autocomplete loads.

The code

The latest will always be here but I paste what I have as of July 2015 for your convenience:

//
// CSS - define a keyframe animation called 'nodeInserted'
// the -webkit stuff are necessary for Safari on iPhone 6 as of 7/2015
//
@keyframes nodeInserted {
    from { opacity: 0.99; }
    to { opacity: 1; }  
}

@-webkit-keyframes nodeInserted{
    from { opacity: 0.99; }
    to { opacity: 1; }
}

div.pac-container {
    animation-duration: 0.001s;
    animation-name: nodeInserted;

    -webkit-animation-duration: 0.001s;
    -webkit-animation-name: nodeInserted;
}

//
// Jquery - listen for 'nodeInserted' 
// note the 'one' event registration to avoid repeating the same task
//
$(document).one('animationstart webkitAnimationStart MSAnimationStart', 'div.pac-container',    
     function(event){
         if(event.originalEvent.animationName === 'nodeInserted'){
    	$(event.target).attr('data-tap-disabled', true).click(function(){
    		$('#myAutocompleteInputElem').blur();   //closes the selection drop down
    	});
         }
     }
);
1 Like
7

This looks great - one thing im not sure about though is there is the jquery code supposed to go? THanks!

8

This is the best solution so far to this issue. Timeout does not work most of the times.