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.

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,