hook up rest of edit icon

Author: adolgachev

src/material/chips/chip-action.ts

@@ -43,6 +43,7 @@ export class MatChipAction {
     _handlePrimaryActionInteraction(): void;
     remove(): void;
     disabled: boolean;
+    _edit(): void;
     _isEditing?: boolean;
   }>(MAT_CHIP);
 

src/material/chips/chip-icons.ts

@@ -76,15 +76,15 @@ export class MatChipEdit extends MatChipAction {
     if (!this.disabled) {
       event.stopPropagation();
       event.preventDefault();
-      // this._parentChip.remove();
+      this._parentChip._edit();
     }
   }
 
   override _handleKeydown(event: KeyboardEvent) {
     if ((event.keyCode === ENTER || event.keyCode === SPACE) && !this.disabled) {
       event.stopPropagation();
       event.preventDefault();
-      // this._parentChip.remove();
+      this._parentChip._edit();
     }
   }
 }

src/material/chips/chip-row.html

@@ -2,19 +2,19 @@
   <span class="mat-mdc-chip-focus-overlay"></span>
 }
 
-@if (editIcon) {
+@if (!_isEditing && editIcon) {
   <span
     class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary"
     role="gridcell">
-  <ng-content select="[matChipEdit]"></ng-content>
+    <ng-content select="[matChipEdit]"></ng-content>
 </span>
 }
 <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell"
     matChipAction
     [disabled]="disabled"
     [attr.aria-label]="ariaLabel"
     [attr.aria-describedby]="_ariaDescriptionId">
-  @if (leadingIcon) {
+  @if (!_isEditing && leadingIcon) {
     <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic">
       <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
     </span>

src/material/chips/chip-row.ts

@@ -90,9 +90,6 @@ export class MatChipRow extends MatChip implements AfterViewInit {
   /** The default chip edit input that is used if none is projected into this chip row. */
   @ViewChild(MatChipEditInput) defaultEditInput?: MatChipEditInput;
 
-  /** The chip's leading edit icon. */
-  @ContentChild(MAT_CHIP_EDIT) editIcon: MatChipEdit;
-
   /** The projected chip edit input. */
   @ContentChild(MatChipEditInput) contentEditInput?: MatChipEditInput;
 
@@ -113,7 +110,7 @@ export class MatChipRow extends MatChip implements AfterViewInit {
 
   /** Returns whether the chip has a leading icon. */
   _hasLeadingIcon() {
-    return !!(this.editIcon || this.leadingIcon);
+    return !this._isEditing && !!(this.editIcon || this.leadingIcon);
   }
 
   override _hasTrailingIcon() {
@@ -144,16 +141,26 @@ export class MatChipRow extends MatChip implements AfterViewInit {
     }
   }
 
-  _handleDoubleclick(event: MouseEvent) {
+  _handleDoubleclick(event: Event) {
     if (!this.disabled && this.editable) {
       this._startEditing(event);
     }
   }
 
-  private _startEditing(event: Event) {
+  override _edit(): void {
+    if (!this.disabled && this.editable) {
+      // markForCheck necessary for edit input to be rendered
+      this._changeDetectorRef.markForCheck();
+      this._startEditing();
+    }
+  }
+
+  private _startEditing(event?: Event) {
     if (
       !this.primaryAction ||
-      (this.removeIcon && this._getSourceAction(event.target as Node) === this.removeIcon)
+      (this.removeIcon &&
+        !!event &&
+        this._getSourceAction(event.target as Node) === this.removeIcon)
     ) {
       return;
     }
@@ -167,7 +174,7 @@ export class MatChipRow extends MatChip implements AfterViewInit {
     afterNextRender(
       () => {
         this._getEditInput().initialize(value);
-        this._editStartPending = false;
+        setTimeout(() => this._ngZone.run(() => (this._editStartPending = false)));
       },
       {injector: this._injector},
     );

src/material/chips/chip.scss

@@ -528,7 +528,7 @@ $token-slots: m2-chip.get-token-slots();
     }
   }
 
-  .mat-mdc-chip-remove {
+  .mat-mdc-chip-edit, .mat-mdc-chip-remove {
     opacity: token-utils.slot(trailing-action-opacity);
 
     &:focus {
@@ -680,7 +680,7 @@ $token-slots: m2-chip.get-token-slots();
   }
 }
 
-.mat-mdc-chip-remove {
+.mat-mdc-chip-edit, .mat-mdc-chip-remove {
   &::before {
     $default-border-width: focus-indicators-private.$default-border-width;
     $offset: var(--mat-focus-indicator-border-width, #{$default-border-width});
@@ -744,6 +744,6 @@ $token-slots: m2-chip.get-token-slots();
 // Prevents icon from being cut off when text spacing is increased.
 // .mat-mdc-chip-remove selector necessary for remove button with icon.
 // Fixes b/250063405.
-.mdc-evolution-chip__icon, .mat-mdc-chip-remove .mat-icon {
+.mdc-evolution-chip__icon, .mat-mdc-chip-edit .mat-icon, .mat-mdc-chip-remove .mat-icon {
   min-height: fit-content;
 }

src/material/chips/chip.ts

@@ -235,6 +235,9 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
   /** The chip's leading icon. */
   @ContentChild(MAT_CHIP_AVATAR) leadingIcon: MatChipAvatar;
 
+  /** The chip's leading edit icon. */
+  @ContentChild(MAT_CHIP_EDIT) editIcon: MatChipEdit;
+
   /** The chip's trailing icon. */
   @ContentChild(MAT_CHIP_TRAILING_ICON) trailingIcon: MatChipTrailingIcon;
 
@@ -369,6 +372,10 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
   _getActions(): MatChipAction[] {
     const result: MatChipAction[] = [];
 
+    if (this.editIcon) {
+      result.push(this.editIcon);
+    }
+
     if (this.primaryAction) {
       result.push(this.primaryAction);
     }
@@ -389,6 +396,11 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
     // Empty here, but is overwritten in child classes.
   }
 
+  /** Handles interactions with the edit action of the chip. */
+  _edit(event: Event) {
+    // Empty here, but is overwritten in child classes.
+  }
+
   /** Starts the focus monitoring process on the chip. */
   private _monitorFocus() {
     this._focusMonitor.monitor(this._elementRef, true).subscribe(origin => {