Angular ui-select mark will lose text input when blurred

Question

SITUATION

Hi guys! I am using Angular ui-select for my application to select users from the database. Using Tagging allows you to enter a new entry in case the user is not in the list.

Writing the name and pressing ENTER or TAB, the new record is saved as a new tag.

Everything works fine, except for one little thing: if I focus on the mouse, I will lose the input that I entered, and this is not very convenient.

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 save the input text as a new tag, not only by pressing ENTER, but also by focusing with the mouse?

Thank you very much!

Answer 1

I forked ui-select and enabled this function by adding 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 transfer request to be merged.

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

If you used my fork and wanted to enable tagging when blurring, 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> 

Answer 2

Just create a directive. This handles the bookmarks tab per click and enters.

 angular.module('module') .directive('tagOnBlur', function($timeout) { return { require: 'uiSelect', link: function(scope, elm, attrs, ctrl) { scope.isTab = false; ctrl.searchInput.bind("keydown keypress", function (event) { if(event.which === 9 || event.which === 13) { event.preventDefault(); scope.isTab = true; } }); ctrl.bind('click', function (event) { scope.isTab = true; }); ctrl.searchInput.on('blur', function() { if (scope.isTab){ scope.isTab = false; return; } if ((ctrl.items.length > 0 || ctrl.tagging.isActivated)) { $timeout(function() { ctrl.searchInput.triggerHandler('tagged'); var newItem = ctrl.search; if ( ctrl.tagging.fct ) { newItem = ctrl.tagging.fct( newItem ); } if (newItem) ctrl.select(newItem, true); }); } }); } }; });