[Autocomplete] Render in parent instead of body?

[phtmgt]

Couldn't find a way to render the Autocomplete select in the parent element instead of body. We are having issue when using this in a Modal component, which treats any click outside of it as a close event. Am I missing something? Why does it have to render in body?

[ErrorPro]

You can always use usePlacesWidget hook and build it yourself

[SailingSteve]

I found the solution to this at

https://stackoverflow.com/questions/50365082/google-maps-autocomplete-not-working-inside-modal-popup

The autocomplete suggested results are there but hidden underneath the popup/modal window which has a higher z-index value. To fix this issue, add the following CSS to your stylesheet:

div.pac-container { z-index: 99999999999 !important; }

I did it with jQuery in the class that calls AutoComplete

$('<style> .pac-container { z-index: 10000; } </style>').appendTo('head');