Autocomplete not working

[bsgies]

Hi, community,

I am using this library in NextJS to show Google Maps with a marker and to use Autocomplete. For some reason, the autcomplete doesn't seem to work at all.

My current structure is like this:

const googleMapsLibraries = ['places'] const { isLoaded } = useJsApiLoader({ googleMapsApiKey: "API_KEY", libraries: googleMapsLibraries, }); const [center, setCenter] = useState({ lat: 51.60716225432206, lng: 0.0006820025611930045, }); if (!isLoaded) { return <CircularProgress size={50} thickness={50} />; }

<Grid item xs={12}> <Autocomplete> <InputField fullWidth label={t("address_label")} placeholder={t("address_placeholder")} type="text" className="os" /> </Autocomplete> </Grid> <Grid item xs={12}> <Box sx={{ height: "300px", }} > <GoogleMap mapContainerStyle={{ width: "100%", height: "100%", }} center={center} zoom={15} options={{ zoomControl: false, streetViewControl: false, mapTypeControl: false, }} > <MarkerF animation="bounce" draggable={true} position={center} icon={"/img/marker.svg"} /> </GoogleMap> </Box> </Grid>

If you notice the screenshot, there are no suggestions for a or ab or abc.

How should I fix it?

[bentsirouteit]

I have the same issue..has anyone managed to solve this? @JustFly1984 @uriklar I know you are not activly working on this anymore - but do you happen to know what is the issue?

[uriklar]

Can you share any errors you're receiving? A codesandbox recreation would go a long way...

[muftisamiullah]

I have a similar issue where Autocomplete seems to work on my dev env, but I check it on server, It doesnt seem to work.

[muftisamiullah]

I think u should check the z-index prop on the .pac-container

try adding this in your css

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

this fixed the issue for me