Есть ли способ контролировать, куда вложенный пользовательский интерфейс выбора материала в поппере монтируется в DOM?

Question

Я пытаюсь разместить меню выбора в Popper. Проблема, с которой я сталкиваюсь, состоит в том, что вложенное меню выбора хочет смонтировать всплывающее окно, которое выходит из него на теле как сосед, а не потомок поппера. Это приводит к возникновению события clickaway. Вот код для его воспроизведения:

import React, { useState } from "react";
import "./styles.css";
import Popper from "@material-ui/core/Popper";
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";

export default function App() {
  const [popperAnc, setPopperAnc] = useState(null);

  const popperOpen = Boolean(popperAnc);

  return (
    <div className="App">
      <div
        onClick={e => {
          setPopperAnc(e.currentTarget);
        }}
      >
        Popper anchor
      </div>
      <div style={{ position: "absolute" }}>
        <Popper open={popperOpen} anchorEl={popperAnc}>
          <ClickAwayListener
            onClickAway={e => {
              setPopperAnc(null);
            }}
          >
            <TextField select label="Menu">
              <MenuItem value="select1">Select me!</MenuItem>
            </TextField>
          </ClickAwayListener>
        </Popper>
      </div>
    </div>
  );
}

https://codesandbox.io/s/strange-bassi-liwdc?file= / src / App. js: 0-1013

Answer 1

1. Если вам нужно использовать Select - просто используйте его (не используйте TextField, это не имеет никакого смысла).
2. Вам необходимо убедиться, что второе popper не отображается как портал (вам нужно установить disabledPortal для MenuProps элемента Select.
3. Вы должны указать новому меню, где позиционировать себя и каков будет его размер .

---

  <div style={{ position: "absolute" }}>
    <Popper open={popperOpen} anchorEl={popperAnc}>
      <ClickAwayListener
        onClickAway={e => {
          console.log("click away");
          setPopperAnc(null);
        }}
      >
        <div>
          <div>Wow</div>
          <Select
            label="Menu"
            MenuProps={{
              disablePortal: true,
              anchorEl: this,
              style: { marginTop: "20px", width: "150px", height: "200px" }
            }}
          >
            <MenuItem value="select1">Select me!</MenuItem>
          </Select>
        </div>
      </ClickAwayListener>
    </Popper>
  </div>

Вот рабочий пример: https://codesandbox.io/s/mui-nested-popper-4uu5l?file= / src / App. js