本文详解如何在 angular 项目中使用 devextreme tagbox 组件实现单个标签内文本的可选中（非编辑），解决因组件默认行为导致的文本选中后瞬间失效的问题，并提供稳定、可复现的配置方案。

本文详解如何在 angular 项目中使用 devextreme tagbox 组件实现单个标签内文本的可选中（非编辑），解决因组件默认行为导致的文本选中后瞬间失效的问题，并提供稳定、可复现的配置方案。

DevExtreme 的 默认将标签区域设计为交互控件（如点击删除、聚焦触发下拉等），其内部事件流会主动阻止或重置原生文本选中状态——尤其当鼠标释放（mouseup）仍处于输入框区域内时，组件会触发重新渲染或焦点管理逻辑，导致你刚选中的文本立即被取消高亮。

核心问题在于：openOnFieldClick 默认为 true，即使你禁用了下拉按钮点击（[showDropDownButton]="true" + 自定义按钮），只要用户在标签区域（即 的输入容器内）执行鼠标按下/释放操作，组件仍可能触发内部 focus() 或 open() 行为，进而重置 window.getSelection()，使文本选择“闪退”。

✅ 正确解法：显式关闭字段点击触发行为

只需将 [openOnFieldClick] 设置为 false 即可切断该干扰链路：

<dx-tag-box displayexpr="text" valueexpr="value">
  [showSelectionControls]="true"
  [showDropDownButton]="true"
  (onValueChanged)="onValueChanged($event)"
  tagTemplate="tagTemplate"
  [opened]="false">

  <div tagdata of class="dx-tag-content tag" tabindex="0">
    <span selectedobjectindex>
      {{ tagData.text }}
    </span>
  </div>

  <div data of>
    <button>dropDown</button>
  </div>
  <dxi-button name="dropDown"></dxi-button></dx-tag-box>

⚠️ 注意事项：

• openOnFieldClick="false" 不会影响下拉按钮功能：只要保留 [showDropDownButton]="true" 和自定义按钮模板，用户仍可通过按钮正常打开下拉列表；
• 文本选择能力依赖浏览器原生机制，因此需确保标签内文本容器（如 ）未设置 user-select: none 或 pointer-events: none 等 CSS 干预；
• 若需进一步增强可访问性，建议为标签添加 role="option" 和 aria-selected 属性，并在 toggleSelection 中同步更新 ARIA 状态；
• 不推荐通过 event.preventDefault() 或 event.stopImmediatePropagation() 在 mousedown 中粗暴拦截——这可能破坏键盘导航（如 Tab 切换）和屏幕阅读器支持。

? 总结：
DevExtreme TagBox 的文本不可选中并非 Bug，而是其交互模型的设计取舍。通过精准关闭 openOnFieldClick，即可在不侵入组件内部逻辑的前提下，释放原生文本选择能力。该方案轻量、稳定、符合框架最佳实践，适用于所有需要标签内文案复制、调试或辅助交互的生产场景。