How to show Autcomplete results within a Modal?

[lucksp]

How can I show Autocomplete results in a modal?
As you can see the dialog and pac-container are siblings...which is not adjusting the z-index

I set the input ref as the item in the dialog/modal: new places.Autocomplete(inputRef.current, options)
I don't see any options that allow you to change the location or custom style.

What's really interesting is the PAC display: none never gets removed...and I also notice multiple instances of the pac-container gets into the DOM...

import { Flex, Input } from '@chakra-ui/react';
import { useMapsLibrary } from '@vis.gl/react-google-maps';
import { useEffect, useRef, useState } from 'react';

interface Props {
  onPlaceSelect: (place: google.maps.places.PlaceResult | null) => void;
  mapCenter: {
    lat: number;
    lng: number;
  };
  id: string;
}

export const SearchBox = ({ id, onPlaceSelect, mapCenter }: Props) => {
  const [placeAutocomplete, setPlaceAutocomplete] =
    useState<google.maps.places.Autocomplete | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const places = useMapsLibrary('places');
  const geocoding = useMapsLibrary('geocoding');

  useEffect(() => {
    if (!places || !inputRef.current) return;

    const options = {
      fields: ['geometry', 'name', 'formatted_address']
    };

    setPlaceAutocomplete(new places.Autocomplete(inputRef.current, options));
  }, [places, id]);

  useEffect(() => {
    if (!places || !geocoding) return;

    const geocoder = new geocoding.Geocoder();
    const location = mapCenter;

    geocoder.geocode({ location }, (results, status) => {
      if (status === 'OK' && results?.[0]) {
        onPlaceSelect(results[0] as unknown as google.maps.places.PlaceResult);
        if (inputRef.current) {
          inputRef.current.value = results[0].formatted_address || '';
        }
      }
    });
  }, [places, geocoding, mapCenter, onPlaceSelect]);

  useEffect(() => {
    if (!placeAutocomplete) return;
    placeAutocomplete.addListener('place_changed', () => {
      const place = placeAutocomplete.getPlace();
      onPlaceSelect(place);
    });
  }, [placeAutocomplete, onPlaceSelect]);

  return (
    <Flex flex={1} width="100%">
      <Input
        id={id || 'location-search-box'}
        placeholder="Search for a location..."
        ref={inputRef}
        style={{
          width: '100%',
          padding: '8px'
        }}
      />
    </Flex>
  );
};

I have tried suggestions of manually trying to override the CSS zIndex but that doesn't work...

[chama-x]

The PAC container gets its own z-index from Google's library, so it ignores modal stacking context. Here's the fix:

Pass the container element to Google's AutocompleteService or use a wrapper div with higher z-index:

.autocomplete-wrapper {
  position: relative;
  z-index: 1300; /* higher than modal (usually 1200) */
}

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

Or better - set it up right in your modal:

<Dialog style={{ zIndex: 1300 }}>
  <div className="autocomplete-wrapper">
    <Autocomplete />
  </div>
</Dialog>

The issue with PAC is Google renders it at document.body level, so normal z-index stacking won't work. Use Chrome DevTools to check the actual z-index value Google's using and go higher. Usually 1300-1400 is safe for most modals.