feat(chips): add support for custom separator keys

Add the ability for chips to be created on keydown of any key code in
the `md-separator-keys` attribute. Custom key codes are supported in
addition to common ones defined in `$mdConstant.KEY_CODE`.

Closes #5279. Closes #5281.

Author: Ignigena

src/components/chips/chips.spec.js

@@ -344,6 +344,7 @@ describe('<md-chips>', function() {
 
           expect(enterEvent.preventDefault).toHaveBeenCalled();
         }));
+
       });
 
       it('focuses/blurs the component when focusing/blurring the input', inject(function() {
@@ -364,6 +365,50 @@ describe('<md-chips>', function() {
     });
 
     describe('custom inputs', function() {
+
+      describe('separator-keys', function() {
+        var SEPARATOR_KEYS_CHIP_TEMPLATE =
+          '<md-chips ng-model="items" md-separator-keys="keys"></md-chips>';
+
+        it('should create a new chip when a comma is entered', inject(function($mdConstant) {
+          scope.keys = [$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA];
+          var element = buildChips(SEPARATOR_KEYS_CHIP_TEMPLATE);
+          var ctrl = element.controller('mdChips');
+
+          var commaInput = {
+            type: 'keydown',
+            keyCode: $mdConstant.KEY_CODE.COMMA,
+            which: $mdConstant.KEY_CODE.COMMA,
+            preventDefault: jasmine.createSpy('preventDefault')
+          };
+
+          ctrl.chipBuffer = 'Test';
+          element.find('input').triggerHandler(commaInput);
+
+          expect(commaInput.preventDefault).toHaveBeenCalled();
+        }));
+
+        it('supports custom separator key codes', inject(function($mdConstant) {
+          var semicolon = 186;
+          scope.keys = [$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA, semicolon];
+
+          var element = buildChips(SEPARATOR_KEYS_CHIP_TEMPLATE);
+          var ctrl = element.controller('mdChips');
+
+          var semicolonInput = {
+            type: 'keydown',
+            keyCode: semicolon,
+            which: semicolon,
+            preventDefault: jasmine.createSpy('preventDefault')
+          };
+
+          ctrl.chipBuffer = 'Test';
+          element.find('input').triggerHandler(semicolonInput);
+
+          expect(semicolonInput.preventDefault).toHaveBeenCalled();
+        }));
+      });
+
       describe('md-autocomplete', function() {
         var AUTOCOMPLETE_CHIPS_TEMPLATE = '\
           <md-chips ng-model="items">\

src/components/chips/demoCustomSeparatorKeys/index.html

@@ -0,0 +1,19 @@
+<div ng-controller="CustomSeparatorCtrl as ctrl" layout="column" ng-cloak>
+  <md-content class="md-padding" layout="column">
+
+    <h2 class="md-title">Use <code>md-separator-keys</code> to customize the key codes which trigger chip creation.</h2>
+    <p>Common key codes found in <code>$mdConstant.KEY_CODE</code> can be used alongside your own.</p>
+    <md-chips
+      ng-model="ctrl.tags"
+      md-separator-keys="ctrl.keys"
+      placeholder="Enter a tag"
+      secondary-placeholder="Comma separated tags"></md-chips>
+    <br/>
+
+    <h2 class="md-title">Add custom separator key codes such as semicolon for e-mails.</h2>
+    <md-chips
+      ng-model="ctrl.contacts"
+      md-separator-keys="ctrl.customKeys"></md-chips>
+
+  </md-content>
+</div>

src/components/chips/demoCustomSeparatorKeys/script.js

@@ -0,0 +1,17 @@
+(function () {
+  'use strict';
+  angular
+      .module('chipsCustomSeparatorDemo', ['ngMaterial'])
+      .controller('CustomSeparatorCtrl', DemoCtrl);
+
+  function DemoCtrl ($mdConstant) {
+    // Use common key codes found in $mdConstant.KEY_CODE...
+    this.keys = [$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA];
+    this.tags = [];
+
+    // Any key code can be used to create a custom separator
+    var semicolon = 186;
+    this.customKeys = [$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA, semicolon];
+    this.contacts = ['test@example.com'];
+  }
+})();

src/components/chips/js/chipsController.js

@@ -107,9 +107,9 @@ function MdChipsCtrl ($scope, $mdConstant, $log, $element, $timeout) {
 }
 
 /**
- * Handles the keydown event on the input element: <enter> appends the
- * buffer to the chip list, while backspace removes the last chip in the list
- * if the current buffer is empty.
+ * Handles the keydown event on the input element: by default <enter> appends
+ * the buffer to the chip list, while backspace removes the last chip in the
+ * list if the current buffer is empty.
  * @param event
  */
 MdChipsCtrl.prototype.inputKeydown = function(event) {
@@ -120,19 +120,25 @@ MdChipsCtrl.prototype.inputKeydown = function(event) {
     return;
   }
 
-  switch (event.keyCode) {
-    case this.$mdConstant.KEY_CODE.ENTER:
-      if ((this.hasAutocomplete && this.requireMatch) || !chipBuffer) break;
-      event.preventDefault();
-      this.appendChip(chipBuffer);
-      this.resetChipBuffer();
-      break;
-    case this.$mdConstant.KEY_CODE.BACKSPACE:
-      if (chipBuffer) break;
-      event.preventDefault();
-      event.stopPropagation();
-      if (this.items.length) this.selectAndFocusChipSafe(this.items.length - 1);
-      break;
+  if (event.keyCode === this.$mdConstant.KEY_CODE.BACKSPACE) {
+    if (chipBuffer) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (this.items.length) this.selectAndFocusChipSafe(this.items.length - 1);
+    return;
+  }
+
+  // By default <enter> appends the buffer to the chip list.
+  if (!this.separatorKeys || this.separatorKeys.length < 1) {
+    this.separatorKeys = [this.$mdConstant.KEY_CODE.ENTER];
+  }
+
+  // Support additional separator key codes in an array of `md-separator-keys`.
+  if (this.separatorKeys.indexOf(event.keyCode) !== -1) {
+    if ((this.hasAutocomplete && this.requireMatch) || !chipBuffer) return;
+    event.preventDefault();
+    this.appendChip(chipBuffer);
+    this.resetChipBuffer();
   }
 };
 

src/components/chips/js/chipsDirective.js

@@ -83,6 +83,7 @@
    *    the delete key will remove the chip.
    * @param {string=} delete-button-label A label for the delete button. Also hidden and read by
    *    screen readers.
+   * @param {expression=} md-separator-keys An array of key codes used to separate chips.
    *
    * @usage
    * <hljs lang="html">
@@ -181,6 +182,7 @@
         onSelect: '&mdOnSelect',
         deleteHint: '@',
         deleteButtonLabel: '@',
+        separatorKeys: '=?mdSeparatorKeys',
         requireMatch: '=?mdRequireMatch'
       }
     };

src/core/util/constant.js

@@ -14,6 +14,7 @@ function MdConstantFactory($sniffer) {
 
   return {
     KEY_CODE: {
+      COMMA: 188,
       ENTER: 13,
       ESCAPE: 27,
       SPACE: 32,