Wie macht MaterialUI das?

Question

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:

 <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>

Dann in app-input-autocomplete:

<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>

Answer 1

我通过执行以下操作解决了这个问题，感谢@Claies 提供的想法以及此链接：

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

1. event.preventDefault on mousedown
2. @click 结果的行为与正常情况相同（关闭输入）
3. @click/@focus 输入集open = true
4. @blur 设置 open = false