Material UI Popper over TextField如何在選擇popper選項時保持popper打開

Question

我正在使用 React Material UI，並且我有一個 Textfield，如果我專注於它，它將部署一個帶有簡單菜單的 Popper。 如果 Textfield 失去焦點，那么 Popper 會自行關閉。 問題是我需要 select 菜單中的任何選項而不關閉 Popper，但是當我這樣做時，文本字段會失去焦點。 我需要的是僅當我在文本字段或菜單之外單擊時才保持 Popper 開啟。

一切都在這個代碼框上。

我試過這個：

const selected = prop => {
   console.log(prop);
}

...

        <Paper elevation={3} className={classes.paper}>
          <MenuList>
            <MenuItem onClick={() => selected('first')}>
              First Option
            </MenuItem>
            <MenuItem onClick={() => selected('next')}>
              Next Option
            </MenuItem>
            <MenuItem onClick={() => selected('last')}>
              And Last Option
            </MenuItem>
          </MenuList>
        </Paper>
      </Popper>

還嘗試使用ClickAwayListener包裝兩個組件，TextField 和 Popper：

<ClickAwayListener onClickAway={blur}>
  <>
    <TextField ... />
    <Popper ...>
     ...
    </Popper>
  </>
</ClickAwayListener>

兩次都不成功...我怎樣才能做到這一點？

Answer 1

盡管@Dekel 的解決方案運行良好。 但在我看來，如果我們使用 React.useRef() 來關注文本字段會更好。

這是更新的解決方案鏈接： https://codesandbox.io/s/goofy-frost-bb88l?file=/src/MyApp.js

const textFieldRef = React.useRef();

內部返回()

<TextField
  aria-describedby={id}
  onFocus={focus}
  onBlur={blur}
  placeholder="Focus on me"
  inputRef={textFieldRef}
/>

選擇任何菜單列表項

const selected = event => {
  console.log("Selected ", event.target.innerText);
  textFieldRef.current.focus();
};

Answer 2

我認為最好使用自動完成來實現這一點，但由於 OP 要求另一種解決方案 - 這是另一種選擇：

一旦模糊 - 檢查導致模糊的元素。 如果該元素是 popper 中的項目之一 - 不要模糊：

if (e.relatedTarget && e.relatedTarget.classList.contains("MuiListItem-root")) {
    return;
}

完全模糊 function 將如下所示：

const blur = (e) => {
    if (e.relatedTarget && e.relatedTarget.classList.contains("MuiListItem-root")) {
        e.target.focus();
        return;
    }
    setAnchorEl(null);
};