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}}\
\
\