Wie macht MaterialUI das?
<p>Wenn Sie sich ihre Autocomplete-Komponente ansehen: https://mui.com/material-ui/react-autocomplete/</p>
<p>Das Eingabefeld behält den Fokus, nachdem auf einen Vorschlag im Dropdown-Menü geklickt wurde. Wie machen sie das? In jeder Variante in meiner eigenen Vue-App (ohne Verwendung der Material-Benutzeroberfläche) kann ich das Klickereignis nicht abrufen, um zu verhindern, dass die Eingabe den Fokus verliert. </p>
<p>Ich habe schon lange versucht, dieses Problem zu googeln, habe aber keine eindeutige Lösung gefunden. Die Leute schlugen zum Beispiel Mousedown/Touchstart vor, aber dadurch wird das Scrollen unterbrochen (durch Ziehen des Dropdown-Menüs). MaterialUI hat dieses Problem offenbar nicht und scheint Mousedown nicht zu verwenden. </p>
<p>Ich habe versucht, das Ereignis mit Chrome Dev Tools zu analysieren, aber ich kann nur ein Einzelklick-Ereignis sehen, aber mit dem reduzierten Code ist es schwer zu sagen, was los ist. </p>
<p>Vuetify macht das auch: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts</p>
<p>Wenn jemand dieses Problem hat, fand ich auch Folgendes hilfreich: https://codepen.io/Pineapple/pen/MWBVqGW</p>
<p><strong>Bearbeiten</strong>Das mache ich: </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>Dann in <code>app-input-autocomplete</code>: </p>
<pre class="brush:html;toolbar:false;"><template>
<App-Eingabe
@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)"
<slot :result="result"
</div>
</div>
</div>
</template>
</app-input>
</template>
<script>
import { ref, toRef } from 'vue';
AppInput aus „@/components/AppInput.vue“ importieren;
import { onClickOutside } from '@vueuse/core';
Standard exportieren {
Komponenten: {
AppInput,
},
inheritAttrs: false,
Requisiten: {
offen: {
Typ: Boolesch,
Standard: falsch,
},
Ergebnisse: {
Typ: Array,
Standard: () => ([]),
},
},
gibt aus: ['autocomplete-close', 'autocomplete-select'],
setup(props, { emit }) {
const dropdown = ref(null);
const open = toRef(props, 'open');
const fokussiert = ref(false);
onClickOutside(dropdown, () => {
if (!focused.value && open.value) {
emit('autocomplete-close');
}
});
zurückkehren {
runterfallen,
konzentriert,
};
},
Methoden: {
im Fokus() {
this.focused = true;
},
onBlur() {
this.focused = false;
},
onClick(result) {
this.$emit('autocomplete-select', result);
},
},
};
</script>
</pre></p>
