0
251
VistasLas sugerencias de Autocompletar de la API de React Google Maps están detrás del diálogo
Estoy usando un componente Autocomplete del paquete @react-google-maps/api .
Aquí está la documentación para el componente Autocomplete .
Primer caso:
Como podemos ver en la captura de pantalla a continuación, Autocomplete nos brinda algunas sugerencias debajo del elemento de campo de input o de text field sí.
Pero cuando envuelvo los componentes de Autocomplete y text field dentro de un componente de Dialog de Material-UI , las sugerencias se muestran debajo del componente de Dialog como podemos ver en la siguiente captura de pantalla.
Aquí está el código (nota: inserte su clave API de Google Maps en el archivo index.js )
dependencias (en el archivo package.json):
"@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",Segundo caso:
Si presionamos enter después de insertar algunos caracteres en Autocomplete , la aplicación se bloqueará e imprimirá un error autocomplete.getPlaces() is not a function
Mis preguntas :
- Entonces, ¿cómo podemos hacer que las sugerencias de
Autocompleteaparezcan directamente debajo deAutocomplete(no debajo del componenteDialog)? - ¿Cómo podemos solucionar el error
autocomplete.getPlaces() is not a function?
1 Respuestas
Responde la pregunta0
El elemento desplegable que se muestra detrás del cuadro de Dialog tiene un nombre de clase llamado pac-container (puede verlo al inspeccionar el elemento). Puede establecer el zIndex de este en un número más alto que el propio Dialog para que aparezca delante del fondo del Dialog :
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} 