fix(chips): editing chips works again (#11364)

- don't override defaults for scope variables which aren't defined
  - properly mark scope variables as optional in chips directive
  - the default inputAriaLabel, deleteHint, etc should not be rendered
- deleteHint in chip content broke the ability to edit chips
  - move deleteHint out of chip content and only aria-label on md-chip
- handle edge case in editing when the user clears the content and
  then enters new content

Fixes #11322. Relates to #11323.

Author: Splaktar

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();
   }

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 = '\
-    <span ng-if="!$mdChipsCtrl.readonly" class="md-visually-hidden">\
-      {{$mdChipsCtrl.deleteHint}}\
-    </span>';
-
 /**
  * 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() {

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}}\
         </span>\
         <md-chip ng-repeat="$chip in $mdChipsCtrl.items"\
-            index="{{$index}}"\
+            index="{{$index}}" aria-label="{{$mdChipsCtrl.deleteHint}}"\
             ng-class="{\'md-focused\': $mdChipsCtrl.selectedChip == $index, \'md-readonly\': !$mdChipsCtrl.ngModelCtrl || $mdChipsCtrl.readonly}">\
           <div class="md-chip-content"\
               tabindex="{{$mdChipsCtrl.ariaTabIndex == $index ? 0 : -1}}"\
@@ -271,24 +271,24 @@
       bindToController: true,
       compile: compile,
       scope: {
-        readonly: '=readonly',
-        removable: '=mdRemovable',
-        placeholder: '@',
-        secondaryPlaceholder: '@',
-        maxChips: '@mdMaxChips',
+        readonly: '=?readonly',
+        removable: '=?mdRemovable',
+        placeholder: '@?',
+        secondaryPlaceholder: '@?',
+        maxChips: '@?mdMaxChips',
         transformChip: '&mdTransformChip',
-        onAppend: '&mdOnAppend',
-        onAdd: '&mdOnAdd',
-        onRemove: '&mdOnRemove',
-        onSelect: '&mdOnSelect',
-        inputAriaLabel: '@',
-        containerHint: '@',
-        deleteHint: '@',
-        deleteButtonLabel: '@',
+        onAppend: '&?mdOnAppend',
+        onAdd: '&?mdOnAdd',
+        onRemove: '&?mdOnRemove',
+        onSelect: '&?mdOnSelect',
+        inputAriaLabel: '@?',
+        containerHint: '@?',
+        deleteHint: '@?',
+        deleteButtonLabel: '@?',
         separatorKeys: '=?mdSeparatorKeys',
         requireMatch: '=?mdRequireMatch',
         chipAppendDelayString: '@?mdChipAppendDelay',
-        ngChange: '&'
+        ngChange: '&?'
       }
     };
 

src/core/util/util.js

@@ -705,7 +705,7 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
 
     /**
      * Processes a template and replaces the start/end symbols if the application has
-     * overriden them.
+     * overridden them.
      *
      * @param template The template to process whose start/end tags may be replaced.
      * @returns {*}