Material UI Popper over TextField如何在选择popper选项时保持popper打开答案

【问题标题】：Material UI Popper over TextField how to keep popper open if the popper options are selectedMaterial UI Popper over TextField如何在选择popper选项时保持popper打开
【发布时间】：2020-04-10 20:29:32
【问题描述】：

我正在使用 React Material UI，并且我有一个 Textfield，如果我专注于它，它将部署一个带有简单菜单的 Popper。如果 Textfield 失去焦点，那么 Popper 会自行关闭。问题是我需要在不关闭 Popper 的情况下从菜单中选择任何选项，但是当我这样做时，Textfield 会失去焦点。我需要的是仅当我在文本字段或菜单之外单击时才保持 Popper 开启。

一切都在这个codesandbox上。

我试过了：

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>

两次都不成功...我怎样才能做到这一点？

【问题讨论】：

使用 Material-UI 的 Autocomplete 组件来实现不是更好吗？
@Dekel，不...我需要这样做。我没有使用自动完成功能，因为我需要保持组件的其余部分可用。

标签： reactjs material-ui

【解决方案1】：

尽管@Dekel 的解决方案运行良好。但是在我看来，如果我们使用 React.useRef() 来关注文本字段会更好。

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

const textFieldRef = React.useRef();

内部return()

<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();
};

【讨论】：

谢谢！我需要再深入一点。

【解决方案2】：

我认为最好使用自动完成来实现这一点，但由于 OP 要求另一种解决方案 - 这是另一种选择：

一旦模糊 - 检查导致模糊的元素。如果该元素是弹出器中的项目之一 - 不要模糊：

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

完整的模糊功能如下所示：

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

【讨论】：