diff --git a/src/components/chips/js/chipController.js b/src/components/chips/js/chipController.js index 58f6170051..e334071b89 100644 --- a/src/components/chips/js/chipController.js +++ b/src/components/chips/js/chipController.js @@ -81,10 +81,20 @@ MdChipCtrl.prototype.getChipContent = function() { /** - * @return {Object} first content element of the chips content element + * When editing the chip, if the user modifies the existing contents, we'll get a span back and + * need to ignore text elements as they only contain blank space. + * `children()` ignores text elements. + * + * When editing the chip, if the user deletes the contents and then enters some new content + * we'll only get a text element back. + * @return {Object} jQuery object representing the content element of the chip */ MdChipCtrl.prototype.getContentElement = function() { - return angular.element(this.getChipContent().contents()[0]); + var contentElement = angular.element(this.getChipContent().children()[0]); + if (!contentElement || contentElement.length === 0) { + contentElement = angular.element(this.getChipContent().contents()[0]); + } + return contentElement; }; @@ -101,7 +111,9 @@ MdChipCtrl.prototype.getChipIndex = function() { * If the contents were updated to be empty, remove the chip and re-focus the input element. */ MdChipCtrl.prototype.goOutOfEditMode = function() { - if (!this.isEditing) return; + if (!this.isEditing) { + return; + } this.isEditing = false; this.$element.removeClass('_md-chip-editing'); @@ -110,10 +122,7 @@ MdChipCtrl.prototype.goOutOfEditMode = function() { var content = this.getContentElement().text(); if (content) { - this.parentController.updateChipContents( - chipIndex, - this.getContentElement().text() - ); + this.parentController.updateChipContents(chipIndex, content); this.$mdUtil.nextTick(function() { if (this.parentController.selectedChip === chipIndex) { @@ -170,11 +179,10 @@ MdChipCtrl.prototype.goInEditMode = function() { MdChipCtrl.prototype.chipKeyDown = function(event) { if (!this.isEditing && (event.keyCode === this.$mdConstant.KEY_CODE.ENTER || - event.keyCode === this.$mdConstant.KEY_CODE.SPACE)) { + event.keyCode === this.$mdConstant.KEY_CODE.SPACE)) { event.preventDefault(); this.goInEditMode(); - } else if (this.isEditing && - event.keyCode === this.$mdConstant.KEY_CODE.ENTER) { + } else if (this.isEditing && event.keyCode === this.$mdConstant.KEY_CODE.ENTER) { event.preventDefault(); this.goOutOfEditMode(); } diff --git a/src/components/chips/js/chipDirective.js b/src/components/chips/js/chipDirective.js index aa954c366e..d72366bcde 100644 --- a/src/components/chips/js/chipDirective.js +++ b/src/components/chips/js/chipDirective.js @@ -21,13 +21,6 @@ angular * */ -// This hint text is visually hidden within a chip but used by screen readers to -// inform the user how they can interact with a chip. -var DELETE_HINT_TEMPLATE = '\ - \ - {{$mdChipsCtrl.deleteHint}}\ - '; - /** * MDChip Directive Definition * @@ -38,8 +31,6 @@ var DELETE_HINT_TEMPLATE = '\ * @ngInject */ function MdChip($mdTheming, $mdUtil, $compile, $timeout) { - var deleteHintTemplate = $mdUtil.processTemplate(DELETE_HINT_TEMPLATE); - return { restrict: 'E', require: ['^?mdChips', 'mdChip'], @@ -57,9 +48,6 @@ function MdChip($mdTheming, $mdUtil, $compile, $timeout) { if (chipsController) { chipController.init(chipsController); - // Append our delete hint to the div.md-chip-content (which does not exist at compile time) - chipContentElement.append($compile(deleteHintTemplate)(scope)); - // When a chip is blurred, make sure to unset (or reset) the selected chip so that tabbing // through elements works properly chipContentElement.on('blur', function() { diff --git a/src/components/chips/js/chipsDirective.js b/src/components/chips/js/chipsDirective.js index 750d6a875e..ff0a91cb31 100644 --- a/src/components/chips/js/chipsDirective.js +++ b/src/components/chips/js/chipsDirective.js @@ -133,7 +133,7 @@ * @param {expression=} md-on-remove An expression which will be called when a chip has been * removed with `$chip`, `$index`, and `$event` available as parameters. * @param {expression=} md-on-select An expression which will be called when a chip is selected. - * @param {boolean} md-require-match If true, and the chips template contains an autocomplete, + * @param {boolean=} md-require-match If true, and the chips template contains an autocomplete, * only allow selection of pre-defined chips (i.e. you cannot add new ones). * @param {string=} input-aria-label A string read by screen readers to identify the input. * @param {string=} container-hint A string read by screen readers informing users of how to @@ -200,7 +200,7 @@ {{$mdChipsCtrl.containerHint}}\ \ \