google.maps.places.Autocomplete: suggestion box position is absolute to <body> instead of <input> #186
Description
Environment details
-
Specify the API at the beginning of the title (for example, "Places: ...")
extended-component-library/src/place_picker/place_picker.ts
Lines 379 to 382 in 4541b75
-
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:
2024-03-13.21-43-15.mp4
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>
);
}
}