react-google-autocomplete dropdown not showing up on MUI Dialog

Question

I am trying to build Address form dialog with Google places api.

The problem is, when I use react-google-autocomplete's usePlacesWidget with MUI TextField, Google place dropdown menu is not showing up on Material UI Dialog.

I have tried adding style to .pac-container, but it still did not work.

const useStyles = makeStyles((theme) => ({
  dialog: {
    // the dropdown is next to the dialog root, not inside
    '& .pac-container': {
      zIndex: '9999 !important',
    },
  },
}));

<Dialog className={classes.dialog}/>

This is what I've done.

Does anyone know how to solve this problem?

score 0 · Answer 1 · answered Sep 29 '22 at 00:17

Use This Custom Modal

import Dialog from '@mui/material/Dialog';
import { withStyles } from '@material-ui/styles';


const styles = theme => ({
root: {
    marginTop: 24,
    padding: theme.spacing(2),
    position: 'absolute',
    zIndex: '7 !important', 
    right: '0px',
    bottom: '0px',
    top: '0px',
    left: '0px',
},
closeButton: {
    position: "absolute",
    right: theme.spacing(1),
    top: theme.spacing(2),
    color: theme.palette.grey[500]
}
}); 
const CustomDialog = withStyles(styles)(Dialog);

react-google-autocomplete dropdown not showing up on MUI Dialog

1 Answers1