How to enable text selection of the tags in DevExtreme tag box

Question

I am using devExtereme in my angular project. I want to be able to select the text of tags in my tagbox.

this is what I have:

<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)"
            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>

The toggleSelection Function:

 public toggleSelection(index: number, event: Event)
    {
        event.stopPropagation();
        if (this.selectedObjectIndex === index)
        {
           this.selectedObjectIndex = null;
        }
        else
        {
            this.selectedObjectIndex = index;
        }
    }

I want to select the text of one tag at a time. so I on mousedown I add the enableSelection class to the tag I want to select the text. this works only if I select text and leave the mouse click outside the tagbox input area. if I select text and mouse is still inside the input field and I leave the mouse right click it selects the tag text for a second and it gets removed automatically.

Answer 1

To be able to edit the tag I had to set the dx-tag-box [openOnFieldClick] to false.