Angular ui-select tagging lose text input on blur

Question

THE SITUATION

Hello guys! I am using Angular ui-select for my app in order to select users from a database. Using Tagging is possible to enter a new entry in the event the user is not present in the list.

By writing the name and pressing ENTER or TAB the new entry is saved as a new tag.

Everything is working fine except one little thing: if i focus out with the mouse i lose the input i have entered, and this is not quite user-friendly.

CODE

<h3>Array of objects</h3>
<ui-select multiple tagging tagging-label="new tag" ng-model="multipleDemo.selectedPeople" theme="select2" ng-disabled="disabled" style="width: 800px;">
  <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
  <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
    <div ng-bind-html="person.name | highlight: $select.search"></div>
    <small>
      email: {{person.email}}
      age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
    </small>
  </ui-select-choices>
</ui-select>
<p>Selected: {{multipleDemo.selectedPeople}}</p>

PLUNKER

http://plnkr.co/edit/7fSAKmj3pLeeTaid4pMH?p=preview

QUESTION

How can i manage to save the input text as a new tag, not only by pressing ENTER, but also by focusing out with the mouse?

Thank you very much!

Answer 1

I have forked the ui-select and enabled this functionality by adding a tag-on-blur='true' to the ui-select directive in your html. If you want you can use my repository while I wait for my pull request to be merged.

https://github.com/mattmcardle/ui-select/tree/tag_on_blur

If you were to use my fork and wanted to enable tagging on blur, your HTML code would look like this:

<h3>Array of objects</h3>
<ui-select multiple tagging tagging-label="new tag" tag-on-blur="true" ng-model="multipleDemo.selectedPeople" theme="select2" ng-disabled="disabled" style="width: 800px;">
  <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
  <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="person.name | highlight: $select.search"></div>
<small>
  email: {{person.email}}
  age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>
<p>Selected: {{multipleDemo.selectedPeople}}</p>