Google Autocomplete in Ionic 4 scrolls with the page

Question

I am using Google Autocomplete in Ionic 4, and everything is working fine. However, when I scroll down the page, the list with the predictions also scrolls and moves with the page, instead of hiding or staying fixed below the search box. How can I solve this?

Default CSS of list container:

element.style {
    width: 292px;
    position: absolute;
    left: 8px;
    top: 249px;
}

.pac-container {
    background-color: #fff;
    position: absolute!important;
    z-index: 1000;
    border-radius: 2px;
    border-top: 1px solid #d9d9d9;
    font-family: Arial,sans-serif;
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.3);
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}

I'm not sure if it's relevant, but here's the code below that loads the Google Autocomplete:

loadAutocomplete() {
  const autocompleteInputNative: HTMLInputElement = this.autocompleteInput._searchbarInput.nativeElement;

  const options = {
    componentRestrictions: { country: "br" },
    fields: ["formatted_address", "address_components", "geometry"],
    types: ["address"],
    bounds: this.bounds,
    strictBounds: true
  };
  
  const autocomplete = new google.maps.places.Autocomplete(autocompleteInputNative, options);

  autocomplete.addListener('place_changed', () => {
    this.autoCompleteSelected(autocomplete);
  });
}

Answer 1

You could use the scrollY attribute of ion-content to prevent scrolling. I would bind to a boolean property that is set when autocomplete is active, something like this:

template:

<ion-content [scrollY]="scrollable">
  ...

component:

scrollable = true; // set to false when autocomplete is active