如何阻止Vue Multiselect中按下回车键取消已选选项？

问题原因 #

在多选（mode="multiple"）模式下，@vueform/multiselect默认会将回车键绑定为取消当前焦点所在选中标签的逻辑。直接在组件上绑定原生@keydown.enter.prevent无效，因为组件内部的事件处理优先级更高，且事件未向外冒泡。

解决方案 #

方案一：利用组件自定义@keydown事件拦截回车操作 #

直接绑定组件抛出的@keydown事件，在回调中阻止回车的默认行为：

1. 修改模板中的Multiselect标签，添加事件绑定：

<Multiselect
  v-model="propValue"
  :options="this.options"
  :placeholder=this.$filters.translate(this.placeholder)
  :closeOnSelect="false"
  :searchable="this.searchable"
  :noResultsText="$filters.translate(this.labels.noResult)"
  ref="multiselect"
  @change="change"
  @click="click"
  @deselect="remove"
  :mode="this.mode"
  :hideSelected='false'
  :max="this.limit"
  @keydown="handleKeyDown" <!-- 新增事件绑定 -->
>
<!-- 原有slot内容保持不变 -->
</Multiselect>

2. 在组件methods中添加事件处理函数：

methods: {
  // 原有方法不变
  handleKeyDown(event) {
    if (event.key === 'Enter') {
      event.preventDefault();
      // 可选：如需在回车时执行自定义逻辑，可在此添加
    }
  }
}

方案二：自定义标签Slot，精准拦截标签上的回车行为 #

如果只需要阻止焦点在选中标签时的回车取消操作，可以自定义标签渲染Slot，给标签元素添加事件阻止：

1. 在Multiselect内部新增自定义tag的slot：

<Multiselect
  <!-- 原有属性保持不变 -->
>
  <!-- 原有caret、beforelist slot不变 -->
  <template v-slot:tag="props">
    <span class="multiselect-tag" @keydown.enter.prevent>
      {{ props.label }}
      <button @click="props.deselect" class="multiselect-tag-remove">×</button>
    </span>
  </template>
</Multiselect>

该方案仅拦截标签上的回车操作，不会影响搜索框中回车选中选项的正常逻辑。

额外注意 #

确认组件的mode属性已设置为"multiple"（默认mode="single"不会生成标签），如果是父组件传入mode，需确保传递的值正确。

内容的提问来源于stack exchange，提问作者Gabriella Tavares