From a904879cbd68e6e92bb2382a3037125691e67f13 Mon Sep 17 00:00:00 2001 From: Torsten Rudolf Date: Tue, 19 Jul 2016 17:00:01 +1000 Subject: [PATCH] feat(tagging): enable tag-creation on blur Implement `tagging-on-blur` option on `ui-select` directive. This closes #544 and is a cleanup of PR #1001 that never got merged because of formatting issues. --- docs/assets/demo.js | 1 + docs/examples/demo-tagging.html | 10 +++++++ src/uiSelectController.js | 21 +++++++++++++-- src/uiSelectDirective.js | 7 ++++- test/select.spec.js | 46 +++++++++++++++++++++++++++++++++ 5 files changed, 82 insertions(+), 3 deletions(-) diff --git a/docs/assets/demo.js b/docs/assets/demo.js index 9d6702c4c..a8537ec53 100644 --- a/docs/assets/demo.js +++ b/docs/assets/demo.js @@ -173,6 +173,7 @@ app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) { vm.multipleDemo = {}; vm.multipleDemo.colors = ['Blue','Red']; vm.multipleDemo.colors2 = ['Blue','Red']; + vm.multipleDemo.colors3 = ['Blue','Red']; vm.multipleDemo.selectedPeople = [vm.people[5], vm.people[4]]; vm.multipleDemo.selectedPeople2 = vm.multipleDemo.selectedPeople; vm.multipleDemo.selectedPeopleWithGroupBy = [vm.people[8], vm.people[6]]; diff --git a/docs/examples/demo-tagging.html b/docs/examples/demo-tagging.html index a6ae2eb6c..866fc48bf 100644 --- a/docs/examples/demo-tagging.html +++ b/docs/examples/demo-tagging.html @@ -28,6 +28,16 @@

Simple String Tags (Predictive Search Model & No Labels)<

Selected: {{ctrl.multipleDemo.colors2}}

+

Simple String Tags (create tag on blur)

+ + {{$item}} + + {{color}} + + +

Selected: {{ctrl.multipleDemo.colors3}}

+
+

Object Tags (with grouping)

{{$item.name}} <{{$item.email}}> diff --git a/src/uiSelectController.js b/src/uiSelectController.js index b7dc2801c..156421f71 100644 --- a/src/uiSelectController.js +++ b/src/uiSelectController.js @@ -439,10 +439,15 @@ uis.controller('uiSelectCtrl', }; // Closes the dropdown - ctrl.close = function(skipFocusser) { + ctrl.close = function(skipFocusser, options) { + if (options === undefined) options = {}; + if (options.resetSearchInput === undefined) options.resetSearchInput = true; + if (!ctrl.open) return; if (ctrl.ngModel && ctrl.ngModel.$setTouched) ctrl.ngModel.$setTouched(); - _resetSearchInput(); + if(options.resetSearchInput) { + _resetSearchInput(); + } ctrl.open = false; $scope.$broadcast('uis:close', skipFocusser); @@ -645,6 +650,18 @@ uis.controller('uiSelectCtrl', }); + //Allow tagging on blur + ctrl.searchInput.on('blur', function () { + if ((ctrl.items.length > 0 || ctrl.tagging.isActivated) && ctrl.taggingOnBlur) { + ctrl.searchInput.triggerHandler('tagged'); + var newItem = ctrl.search; + if (ctrl.tagging.fct) { + newItem = ctrl.tagging.fct(newItem); + } + if (newItem) ctrl.select(newItem, true); + } + }); + ctrl.searchInput.on('paste', function (e) { var data; diff --git a/src/uiSelectDirective.js b/src/uiSelectDirective.js index cded3d463..38dbd5b1b 100644 --- a/src/uiSelectDirective.js +++ b/src/uiSelectDirective.js @@ -143,6 +143,11 @@ uis.directive('uiSelect', } }); + //check if tagging-on-blur is enabled + attrs.$observe('taggingOnBlur', function () { + $select.taggingOnBlur = angular.isDefined(attrs.taggingOnBlur); + }); + //Automatically gets focus when loaded if (angular.isDefined(attrs.autofocus)){ $timeout(function(){ @@ -183,7 +188,7 @@ uis.directive('uiSelect', } else { skipFocusser = true; } - $select.close(skipFocusser); + $select.close(skipFocusser, {resetSearchInput: !$select.taggingOnBlur}); scope.$digest(); } $select.clickTriggeredSelect = false; diff --git a/test/select.spec.js b/test/select.spec.js index 5b735689f..b5c28e657 100644 --- a/test/select.spec.js +++ b/test/select.spec.js @@ -204,6 +204,12 @@ describe('ui-select tests', function() { e.keyCode = keyCode; element.trigger(e); } + + function triggerBlur(element) { + var e = jQuery.Event("blur"); + element.trigger(e); + } + function triggerPaste(element, text, isClipboardEvent) { var e = jQuery.Event("paste"); if (isClipboardEvent) { @@ -1427,6 +1433,46 @@ describe('ui-select tests', function() { expect($(el).scope().$select.selected).toEqual(['idontexist']); }); + it('should allow creating tag on blur in multiple select mode with tagging-on-blur enabled', function() { + + var el = compileTemplate( + ' \ + {{$select.selected.name}} \ + \ + {{item}} \ + \ + ' + ); + + clickMatch(el); + var searchInput = el.find('.ui-select-search'); + searchInput.click(); + setSearchText(el, 'should be created on blur'); + triggerBlur(searchInput); + + expect($(el).scope().$select.selected).toEqual(['should be created on blur']); + }); + + it('should not create tag on blur in multiple select mode with tagging-on-blur disabled', function() { + + var el = compileTemplate( + ' \ + {{$select.selected.name}} \ + \ + {{item}} \ + \ + ' + ); + + clickMatch(el); + var searchInput = el.find('.ui-select-search'); + searchInput.click(); + setSearchText(el, 'should not be created on blur'); + triggerBlur(searchInput); + + expect($(el).scope().$select.selected).toEqual([]); + }); + it('should remove a choice when multiple and remove-selected is not given (default is true)', function () { var el = compileTemplate(