extended-component-library google.maps.places.Autocomplete: suggestion box position is absolute to <body> instead of <input>

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

Use <PlacePicker> in a page with vertical overflow content (i.e. `overflow-y: "scroll")
Search something
Scroll the page down
The dropdown suggestion box is positioned relative to <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

import * as GMPX from '@googlemaps/extended-component-library/react';
import React from 'react';

const API_KEY = process.env.REACT_APP_MAPS_API_KEY;

export default class App extends React.Component {
  render() {
    return (
      <div style={{ 
        position: "fixed", 
        inset: 0, 
        padding: "20px",
        overflowY: "scroll",
      }}>
        <GMPX.APILoader apiKey={API_KEY} />

        <div style={{ height: "300px" }}></div>

        <GMPX.PlacePicker />

        <div style={{ height: "1300px" }}></div>
      </div>
    );
  }
}

Mar 13 '24 13:03 Juneezee

If you would like to upvote the priority of this issue, please comment below or react on the original post above with :+1: so we can see what is popular when we triage.

@Juneezee Thank you for opening this issue. 🙏 Please check out these other resources that might help you get to a resolution in the meantime:

Check the issue tracker - bugs and feature requests for Google Maps Platform APIs and SDKs
Open a support case - Get 1:1 support in Cloud Console.
Discord - chat with other developers
StackOverflow - use the google-maps tag

This is an automated message, feel free to ignore.

Mar 13 '24 13:03 wangela

@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.

Mar 15 '24 00:03 leafsy

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.

Apr 16 '24 06:04 KeithHenry

@KeithHenry Yes that's correct, #203 appears to be a manifestation of the same problem.

Apr 17 '24 23:04 awmack