Angular-google-maps: Autocomplete: not triggering change on iOS

[Sroose]

The autocomplete functionality has an issue on iOS: the places are effectively autocompleted, but upon clicking on them, nothing happens (ie: the autocomplete list hides, but no event is triggered). Note: this does work on any other device (android, web).

Steps to reproduce and a minimal demo of the problem
Not reproducible on web with plunker, even not when opening plunkr on Iphone. To reproduce: use a minimal AGM implementation in an angular app, eg: https://embed.plnkr.co/plunk/LdKdSj

this.mapsAPILoader.load().then(() => {
let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
autocomplete.addListener("place_changed", () => {
==> place_change this will never be triggered

Current behavior
On tapping a suggested place in the autocomplete list, nothing happens

Expected/desired behavior
The place_changed get triggered and I can adjust a marker etc.

angular & angular-google-maps version
"@angular/core": "^4.4.6",
"@agm/core": "^1.0.0-beta.2", (latest)

Other information
Using it in an Ionic (4) app
I've used AGM earlier (very early version, older ionic and angular) and back then it used to work on ios as well.

I could find back posts on the exact same issue, but from people using the Fastclick library. I'm not using it, but this might lbe helpfull as a lead: https://stackoverflow.com/questions/9972080/cant-tap-on-item-in-google-autocomplete-list-on-mobile/20056485#20056485

[SebastianM]

This has to do with the change detection / zone.js of Angular. You have to wrap the code that is in your addListener("place_changed", () => { ... method with NgZone.run(() => {...}). Docs: https://angular.io/api/core/NgZone

[Sroose]

Hi @SebastianM, I am actually already doing this wrapping. You can see in the plunkr example above. Could you plesae check?

[SebastianM]

@Sroose Hmm seems like a bug in google maps itself: https://gist.github.com/schoenobates/ef578a02ac8ab6726487
https://forum.ionicframework.com/t/google-autocomplete-place-changed-doesnt-trigger-on-ios-only/51442/9

[MarinoRaul]

Any idea for this fix? @SebastianM

Thanks!

[lolaswift]

The fix is to enable Google Places API for iOS on the google api library

[Sroose]

For reference, this does the trick:

in _this.mapsAPILoader.load().then_ do:

if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) {
    setTimeout(() => {
        let pacContainer = document.getElementsByClassName('pac-container')[0];
        pacContainer.addEventListener('touchend', function (e) {
            e.stopImmediatePropagation();
        });
    }, 500);
}

[thaitunam]

Hi I have tried all solutions around "pac-container" but nothing work!

and then I figure out the problem that from the CordovaWebViewEngine.
let try to remove this line from your config.xml file:

<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />

hope this help for someone try to resolve this issue, I have spent 3 days on this issue as well!

[jcbriones]

@thaitunam that works but's affecting some text fields to be unclickable.
@Sroose The pac-container doesn't work either.

[acbfaria23]

I have the same issue.
@Sroose and tried all the pac-container as well.
Does anybody found a solution?
@thaitunam @jcbriones ??