tagging-label left in selection when item clicked in dropdown

[Endellur]

Bug description:

When tagging is active, when you type a new item, the tagging-label text is included when you click the item in the dropdown.

Below plunker taken from examples, type in 'Test' and then click on 'Test (custom 'new' label)' and an item will be created that includes 'Test (custom 'new' label)' instead of the expected 'Test'

Note: hitting tab after typing a new entry does not include the tagging-label text.

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/Qkt7EoCAdtDflXxr5TKO

Version of Angular, UI-Select, and Bootstrap/Select2/Selectize CSS

Angular: 1.5.8

UI-Select: 0.19.4

Bootstrap/Select2/Selectize CSS (if applicable): 3.3.7 / 4.0.3 / NA

[user378230]

This appears to be caused by https://github.com/angular-ui/ui-select/blob/0bcd70a335791db756f25efbdcdf96bd5bdaf947/src/uiSelectController.js#L387

clickTriggeredSelect is set to true so the tag isn't recreated without the same.

A PR should have a test for clicking a new tag.

[AroraAsh]

Having the same problem.... how to fix ??

[moisesmoussa]

Im facing the exact same problem, please provide a fix or inform if there is already a fix for this

[key10]

I was facing this issue as well, using v0.19.5 with the multiple select and tagging. I found a workaround for the time being, where I use the 'on-select' attribute to call a controller function of mine, passing the $item from the template (which will be something like: manualEntry + " " + taggingLabel => manualEntry (new)). I then look through the model I have assigned to ui-select for this item. The items are _push_ed into the model, so I start at the end of the array. If/When I find the match, I confirm that the substring of " " + taggingLabel is at the end of $item. You could use a .replace(), but if your taggingLabel happens to be something that someone would manually enter as an entry, you wipe it out along with the taggingLabel. After confirming that the $item string ends with the taggingLabel, I slice it to be only what was manually entered.

function onSelectHandler($item) {
    var idx;
    if ((idx = _.lastIndexOf(vm.myModel, $item)) > -1) {
      var labelAndSpace = " " + vm.myTagLabel;
      if (vm.myModel[idx].slice(-(labelAndSpace.length)) === labelAndSpace) {
        vm.myModel[idx] = vm.myModel[idx].slice(0, -(labelAndSpace.length));
      } 
    }
}

I'm using lodash, but if you aren't, I would just iterate backwards over the array/model. This refreshes ui-select's model/view, due to the watcher on the collection. The only downside is that there is a visual hiccup/studder before it updates.

FWIW, I was digging through ui-select code, and I believe the issue is in the the uiSelectCtrl.select function where it checks to see if the $event came from a click and is assuming that all clicks only happen on existing items. This causes ctrl.clickTriggeredSelect = true;, which in turn causes the next if-block to be skipped (line 678 in dist/select.js). Lines 694-701 in that function/file are what would be removing the appended taggingLabel (although it would be doing so by using .replace() and potentially suffering the effects I mentioned above)

I plan to fork, resolve, and create a PR for this issue, but cannot commit to a timeline for that. If anybody else can, that would be great. For now, the work-around I'm using seems to have the correct/desired behavior, even using the taggingTokens.

Hope this helps

[kellym]

Same issue over here. If anyone has some time, it'd be a worthwhile fix. I'll look into it if I can spare a few moments.

[kellym]

Also, I think there's another issue paired with this, because the attrs.$observe never fires when tagging-label isn't set, so I end up with " undefined" tacked onto the end of it. It may or may not be related.

[kellym]

As mentioned on the other issue, that particular PR is the source of the problem.

[tduchateau]

+1

[miketmoore]

The solution by @key10 works. Unfortunately, it is not ideal, as the tagging label will display for a moment before removed.

[kellym]

Oh, I have a fix I've been using. May not be better than the other, but it works and is only a couple lines from what I remember. Let me push it up.

[kellym]

Here's the PR I just created that resolves the issue for me: https://github.com/angular-ui/ui-select/pull/1943.

[tduchateau]

Hey! Any update on this issue?

[jkevingutierrez]

+1

[tduchateau]

Up! Still interested in this fix ;-)

[Ledragon]

+1

[shermanhui]

+1