<p>如果你看看他们的自动完成组件：https://mui.com/material-ui/react-autocomplete/</p> <p>单击下拉列表中的建议后，输入框会保持焦点...他们是如何做到的？在我自己的 vue 应用程序（不使用材质 UI）中的每个变体中，我无法获取单击事件来阻止输入失去焦点。</p> <p>我已经尝试用谷歌搜索这个问题很长一段时间了，但没有看到明确的解决方案。例如，人们建议 mousedown/touchstart，但这会破坏滚动（通过拖动下拉菜单）。 MaterialUI显然没有这个问题，并且似乎没有使用mousedown。</p> <p>我尝试使用 Chrome 开发工具分析事件，但只能看到单个点击事件，但使用精简的代码很难判断发生了什么。</p> <p>Vuetify 也这样做：https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts</p> <p>如果有人遇到这个问题，我也发现这很有帮助https://codepen.io/Pineapple/pen/MWBVqGW</p> <p><strong>编辑</strong>这就是我正在做的事情：</p> <pre class="brush:html;toolbar:false;"> &lt;app-input-autocomplete @autocomplete-select=&quot;onSelect&quot; @autocomplete-close=&quot;onClose&quot; :open=&quot;open&quot;&gt; &lt;template #default=&quot;{ result }&quot;&gt; &lt;div class=&quot;input-autocomplete-address&quot;&gt; {{ result.address }} &lt;/div&gt; &lt;/template&gt; &lt;/app-input-autocomplete&gt; </pre> <p>然后在<code>app-input-autocomplete</code>中：</p> <pre class="brush:html;toolbar:false;">&lt;template&gt; &lt;app-input @focus=&quot;onFocus&quot; @blur=&quot;onBlur&quot; v-bind=&quot;$attrs&quot;&gt; &lt;template #underInput&gt; &lt;div ref=&quot;dropdown&quot; v-show=&quot;open&quot; class=&quot;input-autocomplete-dropdown&quot;&gt; &lt;div class=&quot;input-autocomplete-results&quot;&gt; &lt;div v-for=&quot;result in results&quot; :key=&quot;result.id&quot; @click=&quot;onClick(result)&quot; class=&quot;input-autocomplete-result&quot;&gt; &lt;slot :result=&quot;result&quot; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;/app-input&gt; &lt;/template&gt; &lt;script&gt; import { ref, toRef } from 'vue'; import AppInput from '@/components/AppInput.vue'; import { onClickOutside } from '@vueuse/core'; export default { components: { AppInput, }, inheritAttrs: false, props: { open: { type: Boolean, default: false, }, results: { type: Array, default: () =&gt; ([]), }, }, emits: ['autocomplete-close', 'autocomplete-select'], setup(props, { emit }) { const dropdown = ref(null); const open = toRef(props, 'open'); const focused = ref(false); onClickOutside(dropdown, () =&gt; { if (!focused.value &amp;&amp; open.value) { emit('autocomplete-close'); } }); return { dropdown, focused, }; }, methods: { onFocus() { this.focused = true; }, onBlur() { this.focused = false; }, onClick(result) { this.$emit('autocomplete-select', result); }, }, }; &lt;/script&gt; </pre></p>