[Google Places Reactive] Not working ios 12.3

Forge Component
(10)
Published on 27 May (5 days ago) by Sofia Mourato
10 votes
Published on 27 May (5 days ago) by Sofia Mourato

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


Hello Lucas,

Can you please share the JS of your solution?

I want to tey it!


Thanks


Lucas Vilela wrote:

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