Angular UI-Select adding duplicate tag for "Tagging" Objects

Question

I am using ui-select library for "Tagging" feature.

I am using Array of objects, in which, each object has id and name. It is working correctly.

If I type non-existent tag it creates new one, which I wanted, but the only problem I am having is if user types already existing tag, it display both new and existing tag. ui-select should allow new tagging only if it is not already existing.

If I type algorithm, then it should select/display existing "Algorithm" tag, rather than allowing duplicate tag insertion.

I am unable to find any setting for this. The same problem is happening on their tagging example page ui-select tagging example. I guess this is not intended to be like that. So is this possible in ui-select or should I handle it in my code? Any solution?

this is my code:

<ui-select multiple tagging="questionVm.addNewTag" theme="select2" ng-model="addQueVm.newQuestion.tags" class="mdl-select">
    <ui-select-match  placeholder="Enter tags">
        <span ng-bind="$item.name"></span>
    </ui-select-match>
    <ui-select-choices repeat="tag in (questionVm.allTags | filter: $select.search)">
        <span ng-bind="tag.name"></span>
    </ui-select-choices>
</ui-select>

Myotonia

Answer 1

You are going to want to change your tagging function to only return a value when the tag is not in your case-insensitive tag set:

questionVm.addNewTag = function(tag){            
    // this could be done somewhere else for efficiency
    var lowerCaseTags = questionVm.allTags.map(
       function(obj){
          return obj.name.toLowerCase()
       }
    );

    // this keeps the new tag from being displayed unless it is really new
    if(!(tag.toLowerCase() in lowerCaseTags)){
        return {name: tag}
    }
}

Sacchariferous