feat(contactChips): add basic support for md-separator-keys (#8142)

Add basic support for md-separator-keys. The ENTER and TAB keys trigger
separation by default through md-autocomplete regardless of what
additional key codes are user defined.

Author: Ignigena

src/components/chips/contact-chips.spec.js

@@ -16,7 +16,7 @@ describe('<md-contact-chips>', function() {
 
   beforeEach(module('material.components.chips'));
 
-  beforeEach(inject(function($rootScope) {
+  beforeEach(inject(function($rootScope, $mdConstant) {
     scope = $rootScope.$new(false);
     var img = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
     scope.allContacts = [
@@ -35,6 +35,7 @@ describe('<md-contact-chips>', function() {
       }
     ];
     scope.contacts = [];
+    scope.keys = [$mdConstant.KEY_CODE.COMMA]
 
     scope.highlightFlags = 'i';
   }));
@@ -144,6 +145,7 @@ describe('<md-contact-chips>', function() {
 
         element.scope().$apply(function() {
           autocompleteCtrl.scope.searchText = 'NAME';
+          autocompleteCtrl.focus();
           autocompleteCtrl.keydown({});
         });
 
@@ -173,6 +175,46 @@ describe('<md-contact-chips>', function() {
        }));*/
     });
 
+    describe('custom separator keys', function() {
+      var CONTACT_CHIPS_TEMPLATE_SEPARATOR = '\
+          <md-contact-chips\
+              ng-model="contacts"\
+              md-contacts="querySearch($query)"\
+              md-contact-name="name"\
+              md-contact-image="image"\
+              md-contact-email="email"\
+              md-highlight-flags="i"\
+              md-separator-keys="keys"\
+              placeholder="To">\
+          </md-contact-chips>';
+
+      it('should add a chip when a separator key is pressed', inject(function($mdConstant, $timeout) {
+        scope.querySearch = jasmine.createSpy('querySearch').and.callFake(function(q) {
+          return scope.allContacts;
+        });
+
+        var element = buildChips(CONTACT_CHIPS_TEMPLATE_SEPARATOR);
+        var ctrl = element.controller('mdContactChips');
+        var chipsCtrl = angular.element(element[0].querySelector('md-chips')).controller('mdChips');
+
+        var autocompleteElement = element.find('md-autocomplete');
+        var autocompleteCtrl = autocompleteElement.controller('mdAutocomplete');
+
+        element.scope().$apply(function() {
+          autocompleteCtrl.scope.searchText = 'NAME';
+          autocompleteCtrl.keydown({});
+        });
+
+        autocompleteCtrl.keydown(keydownEvent($mdConstant.KEY_CODE.DOWN_ARROW));
+        ctrl.inputKeydown(keydownEvent($mdConstant.KEY_CODE.COMMA, autocompleteElement));
+        $timeout.flush();
+
+        var chips = angular.element(element[0].querySelectorAll('md-chip'));
+        expect(chips.length).toBe(1);
+        expect(chips[0].innerHTML).toContain('NAME2');
+      }));
+    });
+
   });
 
   // *******************************
@@ -201,4 +243,13 @@ describe('<md-contact-chips>', function() {
     });
     ctrl.inputKeydown(event);
   }
+
+  function keydownEvent(keyCode, target) {
+    return {
+      keyCode: keyCode,
+      stopPropagation: angular.noop,
+      preventDefault: angular.noop,
+      target: target
+    };
+  }
 });

src/components/chips/demoContactChips/index.html

@@ -9,6 +9,7 @@
         md-contact-image="image"
         md-contact-email="email"
         md-require-match="true"
+        md-separator-keys="ctrl.keys"
         md-highlight-flags="i"
         placeholder="To">
     </md-contact-chips>

src/components/chips/demoContactChips/script.js

@@ -13,14 +13,15 @@
       .module('contactChipsDemo', ['ngMaterial'])
       .controller('ContactChipDemoCtrl', DemoCtrl);
 
-  function DemoCtrl ($q, $timeout, $log) {
+  function DemoCtrl ($q, $timeout, $log, $mdConstant) {
     var self = this;
     var pendingSearch, cancelSearch = angular.noop;
     var lastSearch;
 
     self.allContacts = loadContacts();
     self.contacts = [self.allContacts[0]];
     self.asyncContacts = [];
+    self.keys = [$mdConstant.KEY_CODE.COMMA];
 
     self.querySearch = querySearch;
     self.delayedQuerySearch = delayedQuerySearch;

src/components/chips/js/contactChipsController.js

@@ -18,6 +18,18 @@ MdContactChipsCtrl.prototype.queryContact = function(searchText) {
   return this.contactQuery({'$query': searchText});
 };
 
+MdContactChipsCtrl.prototype.inputKeydown = function(event) {
+  if (!this.separatorKeys || this.separatorKeys.indexOf(event.keyCode) < 0) {
+    return;
+  }
+
+  event.stopPropagation();
+  event.preventDefault();
+
+  var autocompleteCtrl = angular.element(event.target).controller('mdAutocomplete');
+  autocompleteCtrl.select(autocompleteCtrl.index);
+};
+
 MdContactChipsCtrl.prototype.itemName = function(item) {
   return item[this.contactName];
 };

src/components/chips/js/contactChipsDirective.js

@@ -57,7 +57,8 @@ var MD_CONTACT_CHIPS_TEMPLATE = '\
           ng-model="$mdContactChipsCtrl.contacts"\
           ng-change="$mdContactChipsCtrl.ngChange($mdContactChipsCtrl.contacts)"\
           md-require-match="$mdContactChipsCtrl.requireMatch"\
-          md-chip-append-delay="{{$mdContactChipsCtrl.chipAppendDelay}}" \
+          md-chip-append-delay="{{$mdContactChipsCtrl.chipAppendDelay}}"\
+          md-separator-keys="$mdContactChipsCtrl.separatorKeys"\
           md-autocomplete-snap>\
           <md-autocomplete\
               md-menu-class="md-contact-chips-suggestions"\
@@ -68,6 +69,7 @@ var MD_CONTACT_CHIPS_TEMPLATE = '\
               md-no-cache="true"\
               md-min-length="$mdContactChipsCtrl.minLength"\
               md-autoselect\
+              ng-keydown="$mdContactChipsCtrl.inputKeydown($event)"\
               placeholder="{{$mdContactChipsCtrl.contacts.length == 0 ?\
                   $mdContactChipsCtrl.placeholder : $mdContactChipsCtrl.secondaryPlaceholder}}">\
             <div class="md-contact-suggestion">\
@@ -125,7 +127,8 @@ function MdContactChips($mdTheming, $mdUtil) {
       requireMatch: '=?mdRequireMatch',
       minLength: '=?mdMinLength',
       highlightFlags: '@?mdHighlightFlags',
-      chipAppendDelay: '@?mdChipAppendDelay'
+      chipAppendDelay: '@?mdChipAppendDelay',
+      separatorKeys: '=?mdSeparatorKeys',
     }
   };