MaterialUI 是如何做到这一点的？

Question

如果你看看他们的自动完成组件：https://mui.com/material-ui/react-autocomplete/

单击下拉列表中的建议后，输入框会保持焦点...他们是如何做到的？在我自己的 vue 应用程序（不使用材质 UI）中的每个变体中，我无法获取单击事件来阻止输入失去焦点。

我已经尝试用谷歌搜索这个问题很长一段时间了，但没有看到明确的解决方案。例如，人们建议 mousedown/touchstart，但这会破坏滚动（通过拖动下拉菜单）。 MaterialUI显然没有这个问题，并且似乎没有使用mousedown。

我尝试使用 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>
    </模板>
  </应用程序输入>
</模板>

<脚本>
从 'vue' 导入 { ref, toRef };
从'@/components/AppInput.vue'导入AppInput；
从 '@vueuse/core' 导入 { onClickOutside }；

导出默认值{
  成分： {
    应用程序输入，
  },
  继承属性：假，
  道具： {
    打开： {
      类型：布尔值，
      默认值：假，
    },
    结果： {
      类型：数组，
      默认值：() => ([]),
    },
  },
  发出：['自动完成-关闭'，'自动完成-选择']，
  设置（道具，{发射}）{
    常量下拉菜单 = ref(null);

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

    const 集中 = ref(false);

    onClickOutside(下拉菜单, () => {
      if (!focused.value && open.value) {
        发出（'自动完成关闭'）；
      }
    });

    返回 {
      落下，
      专注,
    };
  },
  方法： {
    onFocus() {
      this.focused = true;
    },
    onBlur() {
      this.focused = false;
    },
    onClick（结果）{
      this.$emit('自动完成选择', 结果);
    },
  },
};
</脚本>

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