React Google Maps API Autocomplete suggestions are behind the Dialog

Question

I'm using an Autocomplete component from @react-google-maps/api package.

Here is the documentation for the Autocomplete component.

First case:

As we can see in the screenshot below the Autocomplete gives us some suggestions under the input or text field element itself.

But when I wrap the Autocomplete and text field components inside a Dialog component from Material-UI, the suggestions are shown under the Dialog component as we can see in the screenshot below.

Here is the code (note: please insert your Google Maps API key in the index.js file)

dependencies (in package.json file):

"@material-ui/core": "^4.12.3",
"@material-ui/styles": "^4.11.4",
"@react-google-maps/api": "^2.4.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",

Second case:

If we hit enter after inserting some characters to the Autocomplete, the app will crash and print an error autocomplete.getPlaces() is not a function

My questions:

so how can we make the suggestions from the Autocomplete appear directly under the Autocomplete itself (not under the Dialog component)?
how can we fix the error autocomplete.getPlaces() is not a function?

user_9449426 · Answer

The dropdown element that displays behind the Dialog has a class name called pac-container (you can see it by inspecting the element). You can set the zIndex of it to a higher number than the Dialog itself to force it appearing in front of the Dialog background:

const useStyles = makeStyles((theme) => ({
  dialog: {
    // the dropdown is next to the dialog root, not inside
    "& + .pac-container": {
      zIndex: theme.zIndex.modal + 1
    }
  }
}));

React Google Maps API Autocomplete suggestions are behind the Dialog

1 Answers