reactjs - material-ui TextField Input 在抽屉打开时不起作用

Question

我正在使用 Material-UI Autcomplete组件(免费单人版)，一切正常，直到我将响应添加到抽屉 variant={!matchesSM ? 'persistent' : null} .

<Drawer
  className={classes.drawer}
  variant={!matchesSM ? 'persistent' : null}
  anchor="left"
  open={sidebarOpen}
  classes={{
    paper: classes.drawerPaper,
  }}
  onClose={handleDrawerClose}
>

在平板电脑/移动模式下打开侧抽屉时 TextField Input 无响应。
这是一些截图

const textFieldHandler = () => {
  handleDrawerClose();
  inputRef.current.focus();
};

 <TextField
  {...params}
  ref={inputRef}
  onClick={textFieldHandler}
  placeholder="Search input"
  margin="dense"
...

预期行为
在平板电脑/手机模式下，打开抽屉并单击文本框时，应关闭抽屉并聚焦文本框。
实际行为
打开抽屉时，自动完成不集中在平板电脑和移动设备上。
我创建了 this live running example说明问题:

文本字段仅在侧边栏关闭时有效

我无法弄清楚为什么它不起作用。
关于这个问题的任何反馈？

Answer 1

在 Toolbar.js你可以有一个 onClick在 Textfield并调用 handleDrawerClose Working demo
像这样

<TextField
  {...params}
  onClick={handleDrawerClose}
  placeholder="Search input"
  margin="dense"
...

编辑 : 根据评论。
如果成功关注自动完成并打开建议，那么我们可以使用自动完成 Prop openOnFocus , clearOnBlur和 inputRef Textfield 的 Prop .然后在 onClick调用 focus() 内设置超时

<Autocomplete
  openOnFocus //<---here
  clearOnBlur //<---here
  freeSolo
  id="free-solo-2-demo"
  disableClearable
  options={top100Films.map(option => option.title)}
  renderInput={params => (
    <TextField
      inputRef={ref} //<---here
      {...params}
      onClick={e => {
        handleDrawerClose(); //<---here
        setTimeout(() => ref.current.focus()); //<---here
      }}
      placeholder="Search input"
      margin="dense"
      color="secondary"
     ...