1

Selection through mouse click is not possible when using tagging-label='false' in Angular ui-select. I tested with version angular-ui-select - 0.13.2, 0.14.1 and latest 0.14.9. My requirement is that I can enter any value through keyboard like a textbox and I can select any existing option from dropdown with mouse.

 <ui-select tagging="newTag" tagging-label="false" ng-model="selectedCountry" theme="bootstrap" style="width: 300px;" title="Choose a country">
      <ui-select-match placeholder="Select country...">{{$select.selected}}</ui-select-match>
      <ui-select-choices repeat="country in countries | filter:$select.search">
      {{country}}
      </ui-select-choices>
 </ui-select>

Here is the Plnkr - http://plnkr.co/edit/UGbBq1fSMZK12tpa2wK5?p=preview

kunsingh
  • 254
  • 2
  • 7

1 Answers1

0

I think the problem is in the tagging="newTag" attribute which requires a $scope.newtag() function defined (but it's missing in your controller).

It works changing the code as here below:

  <ui-select ng-model="model.selectedCountry" tagging-label="false" theme="bootstrap" ng-disabled="disabled" style="width: 300px;" title="Choose a country">
    <ui-select-match placeholder="Select country...">{{$select.selected}}</ui-select-match>
    <ui-select-choices repeat="country in countries | filter:$select.search">
      {{country}}
    </ui-select-choices>
  </ui-select>

Another thing is that it's necessary to wrap selectedCountry in a object due to scope inheritance in Angular/JS (all the ui-select examples use this way):

 $scope.model = {selectedCountry: ''};

The plnkr updated:

http://plnkr.co/edit/wqyTifycfTmnnsn22Be9?p=preview

Community
  • 1
  • 1
beaver
  • 17,333
  • 2
  • 40
  • 66
  • you version enables the mouse click but then tagging is disabled. I.e. it is no longer possible to add a new value to the list. – sclassen Feb 22 '16 at 13:38
  • Only I can enter value through keyboard and select value through keyboard arrow but still not able to change the selection with mouse. – kunsingh Feb 22 '16 at 16:13
  • Sorry I had modified the Plunker in order to achieve the indication by @sclassen but it doesn't work. Now I restored the previous version which works but with no addTag. I suspect that `tagging` doesn't work properly with a choices array made of simple strings and not of objects. In the ui-select docs I saw only examples with objects as choice items. – beaver Feb 22 '16 at 16:59
  • However I've seen that also the Plunker presented in the documentation (http://plnkr.co/edit/m1SQXUxftBLQtitng1f0) doesn't work properly (ref https://github.com/angular-ui/ui-select/wiki/ui-select#examples-tagging) – beaver Feb 22 '16 at 17:27
  • @beaver I am sorry....I need tagging='newTag'. My requirement is that I can enter any value through keyboard like a textbox and I can select any existing option from dropdown with mouse click. I updated the original question. See this - https://github.com/angular-ui/ui-select/issues/1214 – kunsingh Feb 23 '16 at 05:06