MUI 自动完成：删除内容点击的输入焦点答案

【问题标题】：MUI Autocompleter: Remove input focus on content clickMUI 自动完成：删除内容点击的输入焦点
【发布时间】：2022-10-06 14:14:02
【问题描述】：

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

这是一个例子：

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

先感谢您！

您希望它在打开时仍可搜索但不默认聚焦吗？
不完全的！当结果弹出器打开时，我不希望该弹出器中的任何点击都将焦点放在输入上。想象一下，我在该下拉列表中有某种点击交互。这种交互总是会触发键盘在我的手机上弹出。

标签： javascript reactjs material-ui

【解决方案1】：

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

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

【讨论】：

啊，我希望它能够工作，但不幸的是，它只会在您实际选择一个选项时变得模糊。不是选项的元素似乎不会触发这一点。
如果您在选项中有输入.. 在按钮处理程序上尝试 e.stopPropagation 以防止自动完成侦听器接收事件.. 我不确定它是否会工作，但如果我是你，我会尝试

【解决方案2】：

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

这是一个例子：

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

【讨论】：