Bagaimanakah MaterialUI melakukan ini?

Question

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);
    },
  },
};

            

Answer 1

Saya menyelesaikan masalah ini dengan melakukan perkara berikut, terima kasih kepada @Claies untuk idea dan pautan ini:

https://codepen.io/Pineapple/pen/MWBVqGW

1. event.preventDefault on mousedown
2. @klik keputusan berkelakuan sama seperti biasa (matikan input)
3. @klik/@set input fokusopen = true
4. @blur ditetapkan terbuka = ​​palsu