0
254
VistasReact Google Maps API Autocomplete suggestions are behind the Dialog
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
Autocompleteappear directly under theAutocompleteitself (not under theDialogcomponent)? - how can we fix the error
autocomplete.getPlaces() is not a function?
1 Respuestas
Responde la pregunta0
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
}
}
}));
<Dialog className={classes.dialog}
