如何在DevExtreme TagBox中启用标签文本选中功能

问题出在DevExtreme TagBox组件会在输入区域内的mouseup事件触发内部状态重置，导致你设置的enableSelection选中样式被自动清除。以下是具体修复步骤：

1. 修改模板事件绑定 #

在自定义标签模板中，新增mouseup事件并阻止冒泡，同时完善mousedown事件的默认行为阻止：

<dx-tag-box [dataSource]="sourves" [value]="value" displayExpr="text" valueExpr="value"
            [placeholder]="" [openOnFieldClick]="false" [showSelectionControls]="true" 
            [showDropDownButton]="true" (onValueChanged)="onValueChanged($event)" 
            tagTemplate="tagTemplate" [opened]="false">

    <div *dxTemplate="let tagData of 'tagTemplate'" class="dx-tag-content tag" 
         (mousedown)="toggleSelection(tagData.value, $event)"
         (mouseup)="$event.stopPropagation()"
         tabindex="0" (dblclick)="showDetails(tagData.value, $event)">
        <span [class.enableSelection]="tagData.value === selectedObjectIndex">
            {{tagData.text}}
        </span>
    </div>

    <div *dxTemplate="let data of 'dropDownButton'">
        <button>dropDown</button>
    </div>

    <dxi-button name="dropDown"></dxi-button>

</dx-tag-box>

2. 更新toggleSelection函数 #

在函数中同时阻止事件冒泡和默认行为，避免组件内部逻辑干扰选中状态：

public toggleSelection(index: number, event: MouseEvent) {
    event.stopPropagation();
    event.preventDefault();
    this.selectedObjectIndex = this.selectedObjectIndex === index ? null : index;
}

3. 确保选中样式生效 #

确认enableSelection类的CSS样式正确定义，比如：

.enableSelection {
    background-color: #f0f0f0;
    border-radius: 3px;
    padding: 2px 4px;
}

原理说明 #

TagBox组件在输入区域内的mouseup事件会触发内部的状态清理逻辑，通过阻止mousedown和mouseup事件的冒泡及默认行为，可避免组件干扰自定义的选中状态切换逻辑，确保选中标签的样式能稳定保留。

内容的提问来源于stack exchange，提问作者Najim Sadat