Wenn Sie sich ihre Autocomplete-Komponente ansehen: https://mui.com/material-ui/react-autocomplete/

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.

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.

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.

Vuetify macht das auch: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts

Wenn jemand dieses Problem hat, fand ich auch Folgendes hilfreich: https://codepen.io/Pineapple/pen/MWBVqGW

BearbeitenDas mache ich:

Dann in app-input-autocomplete: