React Material-UI 的自动完成组件下拉定位不正确

Question

在展开 Material-UI 自动完成组件时，下拉菜单会按预期打开。但是，一旦打开并滚动它，它就会移动，而不是停留在自动完成框下方。我发现我使用 as stated here 的 material ui 版本应该修复此行为。我还在沙盒上对一个普通的新项目进行了测试，它运行良好。

因此，我预计会不情愿地覆盖一些重要的样式设置，但无法找出错误。有什么想法可以看吗？

按照相关代码片段：

The component where I render the Autocomplete component
const useStyles = makeStyles(theme => ({
...,
  vinBox: {
    width: 320,
    marginTop: "4px"
  }
}));
...
return (
    <Autocomplete
      id="vin-selection"
      options={allVehicleVins}
      className={classes.vinBox}
      onChange={(event, data) => setFilter({ ...filter, vin: data })}
      value={filter.vin}
      renderInput={params => (
        <TextField
          {...params}
          margin={"normal"}
          label="VIN"
          variant="standard"
          InputProps={{
            ...params.InputProps,
            startAdornment: (
              <InputAdornment position="start">
                <DirectionsCar />
              </InputAdornment>
            )
          }}
          helperText={
            "Choose a VIN to filter for specific vehicles of your fleet."
          }
          fullWidth
        />
      )}
    />
  );
};

我使用了 Chrome 版本 80.0.3987.149（尽管在其他浏览器中也出现过）。我的一些依赖项：

...
"@material-ui/core": "^4.8.2",
"@material-ui/icons": "^4.5.1",
"@material-ui/lab": "^4.0.0-alpha.35",
"react": "^16.12.0",
...

Answer 1

好的，经过广泛的测试我发现了我的错误。我在 src 文件夹中有一个 index.css。在那里我有以下样式：

body {
  ...
  overflow-y: scroll;
  ...
}

改变这个就可以了。希望对阅读本文的人有所帮助 :)

Answer 2

太棒了..

我发现了这个错误，找不到正确的答案。

所以，我的解决方案：

const Pop = props => {
  const { className, anchorEl, style, ...rest } = props
  const bound = anchorEl.getBoundingClientRect()
  return <div {...rest} style={{
    position: 'absolute',
    zIndex: 9999,
    width: bound.width
  }} />
}

和

<Autocomplete
   ...
   PopperComponent={Pop}
   ...
/>

React Material-UI 的自动完成组件下拉定位不正确

Incorrect dropdown positioning of Autocomplete component for React Material-UI

autocomplete

reactjs

material-ui