google.maps.places.Autocomplete position offset inside angular material Dialog

Question

I'm using a google autocomplete input inside angular material Dialog.

When the user scrolls a bit down, material Dialog uses a trick and (according to source): /** Blocks page-level scroll while the attached overlay is open .

This in turn adds a top: -1000px for example to the document element in the html.

Later when the google autocomplete is shown it's .pac-container class takes this offset into account ( the one on the document element ).

This causes the dropdown to be in a different location than expected ( not next to the input element to which it is bound ).

I've tried running the dialog in pages with scrolling and without, and that makes the difference.

I dug through the angular components GitHub repository to find the overlay scroll issue. I did not find any configuration that can be passed to Dialog or to autocomplete to fix this.

Answer 1

Apparently google.maps.places.Autocomplete uses the html tag's position to position itself.

At the same time angular material Dialog sets the html element style.top value when there is scrolling in the page.

My solution was to remove the top style and then restore it.

This solution is specific when the following is true:

1. google.maps.places.Autocomplete inside an angular material Dialog.
2. The page is scrolled down.
3. The Dialog is covering the background so that the user won't notice we removed the top.

Maybe this will help someone.