MaterialUI 是如何做到這一點的？
<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;"> <app-input-autocomplete
@autocomplete-select="onSelect"
@autocomplete-close="onClose"
:open="open">
<template #default="{ result }">
<div class="input-autocomplete-address">
{{ result.address }}
</div>
</template>
</app-input-autocomplete>
</pre>
<p>然後在<code>app-input-autocomplete</code>中：</p>
<pre class="brush:html;toolbar:false;"><template>
<app-input
@focus="onFocus"
@blur="onBlur"
v-bind="$attrs">
<template #underInput>
<div ref="dropdown" v-show="open" class="input-autocomplete-dropdown">
<div class="input-autocomplete-results">
<div v-for="result in results" :key="result.id" @click="onClick(result)" class="input-autocomplete-result">
<slot :result="result" />
</div>
</div>
</div>
</範本>
</應用程式輸入>
</範本>
<腳本>
從 'vue' 導入 { ref, toRef };
從'@/components/AppInput.vue'導入AppInput；
從 '@vueuse/core' 導入 { onClickOutside }；
導出預設值{
成分： {
應用程式輸入，
},
繼承屬性：假，
道具： {
打開： {
類型：布林值，
預設值：假，
},
結果： {
類型：數組，
預設值：() => ([]),
},
},
發出：['自動完成-關閉'，'自動完成-選擇']，
設定（道具，{發射}）{
常數下拉選單 = ref(null);
const open = toRef(props, '開啟');
常數聚焦 = ref(false);
onClickOutside(下拉式選單, () => {
if (!focused.value && open.value) {
發出（'自動完成關閉'）；
}
});
返回 {
落下，
專注,
};
},
方法： {
onFocus() {
this.focused = true;
},
onBlur() {
this.focused = false;
},
onClick（結果）{
this.$emit('自動完成選擇', 結果);
},
},
};
</腳本>
</pre></p>
