React Google Maps API Autocomplete component gives suggestions outside a Dialog component

[jaballogian]

Cases

Here https://react-google-maps-api-docs.netlify.app/#autocomplete 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 https://codesandbox.io/s/autocomplete-google-maps-yl6mg (note: please insert your Google Maps API key in the index.js file)

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:

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

Environment

OS: Windows 10 Home Single built 19042

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",

engines:

"node": "12.19.0",
"npm": "6.14.8"

[jaballogian]

Update:

The position of suggestions from the Autocomplete has been fixed using this solution https://stackoverflow.com/questions/69534624/react-google-maps-api-autocomplete-suggestions-are-behind-the-dialog/

But the second question (error autocomplete.getPlaces() is not a function) has not been solved yet.

[Novizh]

I'm experiencing the same problem when calling getPlaces(), any workaround on this?

[9alex12]

To solve this problem I directly added an inline style to the Mui Dialog component by changing the z-index. <Dialog onClose={handleClose} open={open} PaperProps={Modalstyles} style={{zIndex: '#}} > {children} </Dialog>

[lmag-ruuu]

I had a similar error, when I pressed the enter key autocomplete.function gave me an error.

The solution I found was to enclose autocomplete in a try catch block.

First of all, the method is called getPlace, not getPlaces.

 const onAutoCompletePlaceIsChanged = () => {
    if (autoComplete !== null) {
      try {
        const places = autoComplete.getPlace();
        console.log("auto complete is changed: ", places);
      }catch(error) {
        console.log(error)
      }
    } else console.log("Autocomplete is not loaded yet");
  };

That way I could handle the error

[Geccles]

Is there a solution being worked on for the 2nd issue where getPlace() does not return anything until you hit enter twice? Ideally would like to only hit enter once.