fix(tagging groupBy): fix group-by to work with tagging

angular-ui · Mar 29, 2016 · 80be85b · 80be85b
1 parent 2f14045
commit 80be85b
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 4 deletions.
diff --git a/examples/demo-tagging.html b/examples/demo-tagging.html
@@ -86,10 +86,10 @@ <h4>(Predictive Search Model / No Labels)</h4>
   <p>Selected: {{multipleDemo.colors2}}</p>
   <hr>
 
-  <h3>Object Tags</h3>
+  <h3>Object Tags (with groupBy)</h3>
   <ui-select multiple tagging="tagTransform" ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled" style="width: 800px;" title="Choose a person">
     <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}">
+    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}" group-by="'country'">
       <div ng-if="person.isTag" ng-bind-html="person.name +' <small>(new)</small>'| highlight: $select.search"></div>
       <div ng-if="!person.isTag" ng-bind-html="person.name + person.isTag| highlight: $select.search"></div>
       <small>

diff --git a/src/uiSelectMultipleDirective.js b/src/uiSelectMultipleDirective.js
@@ -375,6 +375,17 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec
           scope.$evalAsync( function () {
             $select.activeIndex = 0;
             $select.items = items;
+
+            if ($select.isGrouped) {
+              // update item references in groups, so that indexOf will work after angular.copy
+              var itemsWithoutTag = newItem ? items.slice(1) : items;
+              $select.setItemsFn(itemsWithoutTag);
+              if (newItem) {
+                // add tag item as a new group
+                $select.items.unshift(newItem);
+                $select.groups.unshift({name: '', items: [newItem], tagging: true});
+              }
+            }
           });
         }
       });

diff --git a/test/select.spec.js b/test/select.spec.js
@@ -1587,7 +1587,8 @@ describe('ui-select tests', function() {
   describe('multi selection', function() {
 
     function createUiSelectMultiple(attrs) {
-        var attrsHtml = '';
+        var attrsHtml = '',
+            choicesAttrsHtml = '';
         if (attrs !== undefined) {
             if (attrs.disabled !== undefined) { attrsHtml += ' ng-disabled="' + attrs.disabled + '"'; }
             if (attrs.required !== undefined) { attrsHtml += ' ng-required="' + attrs.required + '"'; }
@@ -1596,12 +1597,13 @@ describe('ui-select tests', function() {
             if (attrs.tagging !== undefined) { attrsHtml += ' tagging="' + attrs.tagging + '"'; }
             if (attrs.taggingTokens !== undefined) { attrsHtml += ' tagging-tokens="' + attrs.taggingTokens + '"'; }
             if (attrs.inputId !== undefined) { attrsHtml += ' input-id="' + attrs.inputId + '"'; }
+            if (attrs.groupBy !== undefined) { choicesAttrsHtml += ' group-by="' + attrs.groupBy + '"'; }
         }
 
         return compileTemplate(
             '<ui-select multiple ng-model="selection.selectedMultiple"' + attrsHtml + ' theme="bootstrap" style="width: 800px;"> \
                 <ui-select-match placeholder="Pick one...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match> \
-                <ui-select-choices repeat="person in people | filter: $select.search"> \
+                <ui-select-choices repeat="person in people | filter: $select.search"' + choicesAttrsHtml + '> \
                   <div ng-bind-html="person.name | highlight: $select.search"></div> \
                   <div ng-bind-html="person.email | highlight: $select.search"></div> \
                 </ui-select-choices> \
@@ -2257,6 +2259,24 @@ describe('ui-select tests', function() {
       expect(el.find('.ui-select-choices-row-inner').size()).toBe(0);
     });
 
+    it('should allow creating tag in multi select mode with tagging and group-by enabled', function() {
+      scope.taggingFunc = function (name) {
+        return {
+          name: name,
+          email: name + '@email.com',
+          group: 'Foo',
+          age: 12
+        };
+      };
+
+      var el = createUiSelectMultiple({tagging: 'taggingFunc', groupBy: "'age'"});
+
+      showChoicesForSearch(el, 'amal');
+      expect(el.find('.ui-select-choices-row-inner').size()).toBe(2);
+      expect(el.scope().$select.items[0]).toEqual(jasmine.objectContaining({name: 'amal', email: 'amal@email.com', isTag: true}));
+      expect(el.scope().$select.items[1]).toEqual(jasmine.objectContaining({name: 'Amalie', email: 'amalie@email.com'}));
+    });
+
     it('should allow paste tag from clipboard', function() {
       scope.taggingFunc = function (name) {
         return {