React Google Maps API 自动完成建议在对话框后面

Question

我正在使用 @react-google-maps/api 包中的 Autocomplete 组件。

Here 是 Autocomplete 组件的文档。

第一种情况：

正如我们在下面的屏幕截图中看到的那样，Autocomplete 在 input 或 text field 元素本身下给了我们一些建议。

但是当我将 Autocomplete 和 text field 组件包装在 Material-UI 的 Dialog 组件中时，建议在 Dialog 组件下显示为我们可以在下面的截图中看到。

Here 是代码（注意：请在 index.js 文件中插入您的 Google 地图 API 密钥）

依赖项（在 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",

第二种情况：

如果我们在向 Autocomplete 中插入一些字符后按回车键，应用程序将崩溃并打印错误 autocomplete.getPlaces() is not a function

我的问题:

那么我们如何才能让 Autocomplete 的建议直接出现在 Autocomplete 本身之下（而不是在 Dialog 组件之下）？
我们如何修复错误 autocomplete.getPlaces() is not a function？

Answer 1

显示在 Dialog 后面的下拉元素有一个名为 pac-container 的 class 名称（您可以通过检查该元素看到它）。您可以将它的 zIndex 设置为比 Dialog 本身更高的数字，以强制它出现在 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}

React Google Maps API 自动完成建议在对话框后面

React Google Maps API Autocomplete suggestions are behind the Dialog

javascript

google-maps

reactjs

material-ui