MUI Autocompleter：删除对内容点击的输入焦点

Question

所以我在移动设备上使用 MUI 的Autocomplete功能，但遇到以下问题：当下拉列表打开时，我在该列表中有一个我想与之交互的元素（可以是按钮或任何我想点击的地方） . 一旦我点击那个交互元素，输入就会被聚焦并且键盘会弹出。 我不想要这个。 我怎样才能避免这种情况？

这是一个例子：

https://codesandbox.io/s/small-field-q4y0je?file=/demo.tsx:0-5484

先感谢您！

Answer 1

自动完成中有一个名为blurOnSelect的道具，从这里看一下https://mui.com/material-ui/react-autocomplete/

 <Autocomplete
        {...defaultProps}
        id="blur-on-select"
        blurOnSelect
        renderInput={(params) => (
          <TextField {...params} label="blurOnSelect" variant="standard" />
        )}
      />

Answer 2

一段时间后，我想出了某种可接受的解决方案。 问题是blurOnSelect绑定到自动完成的选项。 由于我正在使用自定义元素和数据扩展自动完成功能，因此我无法充分利用 MUI 组件带来的所有优势。 对于失去焦点的输入，我只需要创建一个保存输入元素的引用，一旦我触摸单击内容，输入就会变得模糊或失去焦点。

这是一个例子：

https://codesandbox.io/s/amazing-jang-r8s67b?file=/demo.tsx