Jika anda melihat komponen autolengkap mereka: https://mui.com/material-ui/react-autocomplete/

Kotak input mengekalkan fokus selepas mengklik pada cadangan dalam menu lungsur... Bagaimanakah mereka melakukannya? Dalam setiap varian dalam apl vue saya sendiri (tidak menggunakan UI bahan) saya tidak boleh mendapatkan acara klik untuk mengelakkan input daripada kehilangan fokus.

Saya telah lama mencuba google masalah ini tetapi tidak melihat penyelesaian yang jelas. Sebagai contoh, orang mencadangkan tetikus turun/mula sentuh, tetapi ini menghentikan penatalan (dengan menyeret menu lungsur). MaterialUI nampaknya tidak mempunyai masalah ini dan nampaknya tidak menggunakan mousedown.

Saya cuba menganalisis acara menggunakan Alat Pembangun Chrome tetapi saya hanya boleh melihat satu acara klik, tetapi dengan kod yang dilucutkan, sukar untuk mengetahui perkara yang berlaku.

Vuetify juga melakukan ini: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts

Jika sesiapa mengalami masalah ini, saya juga mendapati ini berguna https://codepen.io/Pineapple/pen/MWBVqGW

EditInilah yang saya lakukan:

 @autocomplete-select="onSelect" @autocomplete-close="onClose" :open="open">    
Kemudian dalam app-input-autocomplete: 
 
  import { ref, toRef } daripada 'vue'; import AppInput daripada '@/components/AppInput.vue'; import { onClickOutside } daripada '@vueuse/core'; eksport lalai { komponen: { AppInput, }, inheritAttrs: palsu, alat peraga: { buka: { jenis: Boolean, lalai: palsu, }, keputusan: { jenis: Susunan, lalai: () => ([]), }, }, memancarkan: ['autolengkap-tutup', 'autolengkap-pilih'], persediaan(props, { emit }) { const dropdown = ref(null); const open = toRef(props, 'open'); const fokus = ref(false); onClickOutside(dropdown, () => { jika (!focused.value && open.value) { emit('autocomplete-close'); } }); kembali { lungsur turun, fokus, }; }, kaedah: { onFokus() { ini.fokus = benar; }, onBlur() { ini.fokus = palsu; }, onClick(hasil) { this.$emit('autocomplete-select', result); }, }, };