Select2 v4.0.5多标签模式回车创建标签后文本残留问题求助

这绝对不是正常行为——这是Select2 4.0.5版本的一个已知小bug，在开启tags: true且设置closeOnSelect: false的多标签场景下，按下回车键创建/选择标签后，组件没有正确清空搜索输入框的文本，导致原输入内容残留，直到触发其他键盘事件才会消失。

快速修复方案（无需升级版本） #

你可以通过监听Select2的select:select事件，在创建新标签后手动清空搜索输入框并触发状态更新：

// 初始化Select2之后添加这段代码
$('.myEditor').on('select:select', function(e) {
  // 仅处理新创建的标签（匹配你createTag里的newTag标记）
  if (e.params.data?.newTag) {
    // 获取Select2内部的搜索输入框元素
    const $searchInput = $(this).data('select2').dropdown.$search;
    // 清空输入框并触发input事件，让Select2同步状态
    $searchInput.val('').trigger('input');
  }
});

如果上述方法偶尔有延迟问题，也可以用键盘事件监听的方式兜底：

$('.myEditor').on('keydown', function(e) {
  // 监听回车键
  if (e.keyCode === 13) {
    // 延迟100ms确保标签已创建完成，再清空输入框
    setTimeout(() => {
      const $searchInput = $(this).data('select2').dropdown.$search;
      $searchInput.val('').trigger('input');
    }, 100);
  }
});

彻底解决：升级Select2版本 #

这个bug在Select2 4.0.13及之后的版本中已经被官方修复了。如果你的项目允许升级依赖，直接把Select2升级到最新稳定版（比如当前的4.0.13+），就可以彻底避免这个问题，不需要额外写修复代码。

额外小提示 #

你的createTag函数里把空格替换为空的逻辑是没问题的，但要注意如果用户输入的文本全是空格，term.replace(/ /g, "")会变成空字符串，结合term.length < 2的判断，会返回null，这符合你的预期，没问题。

内容的提问来源于stack exchange，提问作者Calvin Nunes