如果你看看他们的自动完成组件：https://mui.com/material-ui/react-autocomplete/
当你点击下拉列表中的建议后，输入框会保持焦点...他们是怎么做到的？在我自己的vue应用程序（不使用材质UI）中，我无法让click事件阻止输入失去焦点。
我在谷歌上搜索这个问题已经有一段时间了，但我没有看到明确的解决方案。例如，人们建议使用鼠标按下/触摸启动，但这会破坏滚动（通过拖动下拉菜单）。MaterialUI显然没有这个问题，而且似乎没有使用鼠标按下。
我试过使用Chrome开发工具分析事件，我只能看到一个单击事件，但使用缩小的代码很难判断发生了什么。
Vuetify也做到了这一点：https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts
我也发现了这个，这很有帮助，如果有人遇到这个问题https://codepen.io/Pineapple/pen/MWBVqGW

编辑以下是我正在做的：

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

然后在app-input-autocomplete中：

<template>
  <app-input
    @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)" class="input-autocomplete-result">
            <slot :result="result" />
          </div>
        </div>
      </div>
    </template>
  </app-input>
</template>

<script>
import { ref, toRef } from 'vue';
import AppInput from '@/components/AppInput.vue';
import { onClickOutside } from '@vueuse/core';

export default {
  components: {
    AppInput,
  },
  inheritAttrs: false,
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    results: {
      type: Array,
      default: () => ([]),
    },
  },
  emits: ['autocomplete-close', 'autocomplete-select'],
  setup(props, { emit }) {
    const dropdown = ref(null);

    const open = toRef(props, 'open');

    const focused = ref(false);

    onClickOutside(dropdown, () => {
      if (!focused.value && open.value) {
        emit('autocomplete-close');
      }
    });

    return {
      dropdown,
      focused,
    };
  },
  methods: {
    onFocus() {
      this.focused = true;
    },
    onBlur() {
      this.focused = false;
    },
    onClick(result) {
      this.$emit('autocomplete-select', result);
    },
  },
};
</script>