[Google Places Mobile] Not working ios 12.3

Forge Component
(9)
Published on 2018-08-21 by flpmorais
9 votes
Published on 2018-08-21 by flpmorais

Plugin seems to encounter a bug with 12.3
I'm able to see the dropdown, but when I select a place the dropdown just dissapears and nothing happens.

Unless I try after the publishing and getting the "your app is up to date" message. Then it works but only if I remain on the page as soon as I switch page and back or restart the app it stops working.

I do use it in combination with the google map plugin that displays a map on the same page.
I already made sure only one google API is loaded

Solution

I found the issue.

On first load the stop prop fired to soon and the .pac-container didn't exist yet.
After the initial load the .pac-container stayed in the dom and everytime the screen was loaded a new one was added causing the stop prop to fire on the wrong element.

I added some JS to the OnDestroy of the PlacesAutoComplete webblock to remove the pac-container
if( document.getElementsByClassName('pac-container').length > 1) $('.pac-container').remove();

and I added a check to InitAutoComplete to verify that there was a pac-container

// need to stop prop of the touchend event
        if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) {
            stopprop();
        }
...
...
function stopprop(){
    console.log(document.getElementsByClassName('pac-container').length > 0);
    setTimeout(function() {
        if(document.getElementsByClassName('pac-container').length > 0){
            var container = document.getElementsByClassName('pac-container')[0];
                container.addEventListener('touchend', function(e) {e.stopImmediatePropagation();});
        } else {stopprop();}
    }, 500);
}
Solution

Eric Bulters wrote:

I found the issue.

On first load the stop prop fired to soon and the .pac-container didn't exist yet.
After the initial load the .pac-container stayed in the dom and everytime the screen was loaded a new one was added causing the stop prop to fire on the wrong element.

I added some JS to the OnDestroy of the PlacesAutoComplete webblock to remove the pac-container
if( document.getElementsByClassName('pac-container').length > 1) $('.pac-container').remove();

and I added a check to InitAutoComplete to verify that there was a pac-container

// need to stop prop of the touchend event
        if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) {
            stopprop();
        }
...
...
function stopprop(){
    console.log(document.getElementsByClassName('pac-container').length > 0);
    setTimeout(function() {
        if(document.getElementsByClassName('pac-container').length > 0){
            var container = document.getElementsByClassName('pac-container')[0];
                container.addEventListener('touchend', function(e) {e.stopImmediatePropagation();});
        } else {stopprop();}
    }, 500);
}


Hello Eric,

I also went through this problem and looking for some tips about it, i found your thread here. I tried to apply your patch but it didn't work for me, I 'm running an iPhone 6 Plus with iOS 12.4.2 and couldn't make it work.


The solution that I found was putting the  $('.pac-container').remove(); before the try, on the initAutoComplete JS.


Hope this helps anyone having this issue.


Regards,


Lucas Vilela