Open Juneezee opened 5 months ago
@Juneezee Thank you for opening this issue. 🙏 Please check out these other resources that might help you get to a resolution in the meantime:
google-maps
tagThis is an automated message, feel free to ignore.
@Juneezee Much appreciate the detailed repro and demo! This appears to be a known issue of the Place Autocomplete widget (see related StackOverflow post). Could you see if any of the workarounds found in the linked post works for you?
The Maps JavaScript API team is working on a new and improved Place Autocomplete widget that addresses this and more; we have plans to migrate Place Picker implementation to use the new widget once ready.
I think #203 is related - different symptoms but the same fundamental cause: the autocomplete overlay is position: absolute
in the <body>
but the input is in a component that may be nested under different stacking contexts.
@KeithHenry Yes that's correct, #203 appears to be a manifestation of the same problem.
Environment details
Specify the API at the beginning of the title (for example, "Places: ...")
https://github.com/googlemaps/extended-component-library/blob/4541b75a28a9059e85714b08caa36eade5dfc2e9/src/place_picker/place_picker.ts#L379-L382
OS type and version: Linux 6.7.9
Library version: 0.6.7
Steps to reproduce
<PlacePicker>
in a page with vertical overflow content (i.e. `overflow-y: "scroll")<body>
instead of the search bar<input>
Demo:
https://github.com/googlemaps/extended-component-library/assets/20135478/1f9ef1da-a935-4eef-9d21-6f39a02427a3
Code example
Minimal reproducible code in React