Tagify组件重复标签无错误提示问题排查求助

各位大佬好！我在Python Flask SqlAlchemy项目里用Tagify做标签系统，想要实现两个核心功能：

• 输入标签前缀时能自动补全预定义的标签列表，这部分已经正常工作了
• 允许用户手动输入自定义标签（不强制用白名单），但要阻止重复标签添加，并且给出错误提示

现在的问题是：当我输入重复标签时，错误提示完全不显示，而且看控制台日志，每次都会走到clearError()的逻辑里，根本没触发预期的错误提示。我试过用ChatGPT排查，但来回都是无效的方案，实在没办法了，来求助各位大神！

下面是我的相关代码：

HTML部分 #

<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify@4.35.1/dist/tagify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify@4.35.1/dist/tagify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<input id="tags" placeholder="Add tags" />
<div id="tag-error" style="color: red; font-size: 0.875rem; min-height: 1.5rem; margin-top: 0.5rem;"></div>

CSS部分 #

#tag-error {
  /* Just making sure the div is visible and spaced */
  color: red;
  font-size: 14px;
  min-height: 24px;
  margin-top: 5px;
}

JavaScript部分 #

console.log("✅ Tagify script loaded");
const input = document.querySelector('#tags');
const tagify = new Tagify(input, {
  maxTags: 5,
  enforceWhitelist: false,
  dropdown: {
    enabled: 1,
    fuzzySearch: true,
    position: 'auto',
    highlightFirst: true
  }
});

let wasDuplicate = false;

tagify.on('beforeAddTag', function(e) {
  const newTag = e.detail.data.value.toLowerCase();
  const existingTags = tagify.value.map(tag => tag.value.toLowerCase());
  
  if (existingTags.includes(newTag)) {
    e.preventDefault();
    wasDuplicate = true;
    console.log("❌ Duplicate tag blocked:", newTag);
    showError(`The tag "${newTag}" has already been added.`);
  } else {
    wasDuplicate = false;
    console.log("✅ Unique tag allowed:", newTag);
    clearError();
  }
});

tagify.on('add', function(e) {
  const addedTag = e.detail.data.value.toLowerCase();
  if (wasDuplicate) {
    console.log("🚫 Skipping add handler due to duplicate:", addedTag);
    wasDuplicate = false;
    return;
  }
  console.log('✅ Valid tag added:', addedTag);
  clearError();
});

tagify.on('invalid', function(e) {
  const invalidTag = e.detail.data.value;
  const reason = e.detail.message || "This tag is not valid";
  console.log("🔴 Invalid tag:", invalidTag, "Reason:", reason);
  showError(reason);
});

// ✅ Split error functions for clarity
function showError(msg) {
  const errorEl = document.getElementById('tag-error');
  if (errorEl) {
    errorEl.innerText = msg;
    errorEl.style.display = 'block';
    errorEl.style.color = 'red';
    errorEl.style.fontSize = '0.875rem';
    errorEl.style.minHeight = '1.5rem';
    console.log("⚠️ Error displayed:", msg);
  }
}

function clearError() {
  const errorEl = document.getElementById('tag-error');
  if (errorEl) {
    errorEl.innerText = "";
    errorEl.style.display = 'none';
    console.log("✅ Error cleared");
  }
}

我观察到的现象是：每次输入重复标签，控制台里能看到❌ Duplicate tag blocked: xxx的日志，但紧接着就会出现✅ Error cleared的日志，说明clearError()被意外触发了，导致错误提示刚显示就被清空了。有没有大佬能帮我找出问题所在？

内容来源于stack exchange