React，Material UI，Select，disableScrollLock，使菜单位置相对于锚点

Question

import React from "react";
import "./styles.css";

import Input from "@material-ui/core/Input";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const names = [
  "Oliver Hansen",
  "Van Henry",
  "April Tucker",
  "Ralph Hubbard",
  "Omar Alexander",
  "Carlos Abbott",
  "Miriam Wagner",
  "Bradley Wilkerson",
  "Virginia Andrews",
  "Kelly Snyder"
];

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250
    }
  },
  disableScrollLock: true
};

export default function App() {
  const [personName, setPersonName] = React.useState([]);

  const handleChange = event => {
    setPersonName(event.target.value);
  };

  return (
    <div className="App" style={{ height: "1000px" }}>
      <FormControl>
        <Select
          labelId="demo-mutiple-name-label"
          id="demo-mutiple-name"
          multiple
          value={personName}
          onChange={handleChange}
          input={<Input />}
          MenuProps={MenuProps}
        >
          {names.map(name => (
            <MenuItem key={name} value={name}>
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

代码也可以在这里找到https://codesandbox.io/s/awesome-leaf-ooko1

我正在使用 React 16，最新的 Material UI 核心，Material UI Select Component

我在这里尝试做的是当我打开下拉菜单（disableScrollLock=true）时，当我滚动窗口时，下拉菜单将相对于未固定在窗口上的锚元素。我怎样才能做到这一点？

Answer 1

我不熟悉 React，但我设法找到了一个具有不同组件的工作示例。

看到这个答案：https://stackoverflow.com/a/54011607/152016

Coder 使用 ReportComboBox 而不是 Select，但他解决了您的 sn-p 的另一个问题：增加选择大小。

当您在 sn-p 中选择很多项目时，会出现 UI 问题。

够离题了，我已经更改了答案的 sn-p 以启用滚动（例如，通过设置 body { height: 3000px; }，您可以看到滚动将选择框保持在原位：https://codesandbox.io/s/react-select-ellipsis-one-row-example-k62hy

希望这足以解决问题或至少提供线索。