2

I am using angular ui-select and I want to allow the user to select an option using auto-complete, but also allow them to type in custom options.

I've configured the control with tagging enabled and no tagging labels as follows:

<ui-select multiple tagging tagging-label="false" ng-model="colors" theme="bootstrap" style="width: 300px;" title="Choose a color">
  <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
  <ui-select-choices repeat="color in availableColors | filter:$select.search">
        {{color}}
  </ui-select-choices>
</ui-select>

Here's an example plunkr: http://plnkr.co/edit/YW7WloZCds1XIOS6UsNs?p=preview

The problem is that when you type in a word that exists in the available colors and press enter, that option does not become selected.

In the plunkr, you can see this if you type Blue and press enter.

Where am I going wrong?

ChaoticNadirs
  • 2,280
  • 2
  • 20
  • 27

1 Answers1

3

This appears to be a known bug related to using tagging-label="false". It works correctly when removing this option, or perhaps you can find a workaround.

https://github.com/angular-ui/ui-select/issues/770

aw04
  • 10,857
  • 10
  • 56
  • 89
  • +1 for verifying I'm not going crazy. I'll have a play and see if there's a workaround before accepting this answer. – ChaoticNadirs Jul 14 '15 at 19:00
  • Cool, I didn't have time to try anything really so hopefully there's something simple. Good luck. – aw04 Jul 14 '15 at 19:14