search

googlemaps / extended-component-library

A set of Web Components from Google Maps Platform
https://configure.mapsplatform.google/
Apache License 2.0
121 stars 10 forks source link

google.maps.places.Autocomplete: suggestion box position is absolute to <body> instead of <input> #186

Open Juneezee opened 5 months ago

Juneezee commented 5 months ago

Environment details

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

  2. OS type and version: Linux 6.7.9

  3. Library version: 0.6.7

Steps to reproduce

  1. Use <PlacePicker> in a page with vertical overflow content (i.e. `overflow-y: "scroll")
  2. Search something
  3. Scroll the page down
  4. 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>
    );
  }
}
wangela commented 5 months ago

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:

This is an automated message, feel free to ignore.

leafsy commented 5 months ago

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

KeithHenry commented 4 months ago

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.

awmack commented 4 months ago

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