feat(material/chips): add (optional) edit icon to input chips #31041

adolgachev · 2025-05-07T00:09:55Z

Adds an optional edit icon to input chips to allow for better discoverability of editable chips over existing double-click and focus-enter to edit behavior.

The edit icon introduces concept of a leading action with an icon button similar to trailing action used for delete icon button. This can be combined with the existing avatar icon for a chip. The editable flag is preserved but is independent of the edit icon, allowing for both existing and new behavior or either one.

Updated chip demo to add option to show avatar and/or edit icon.

github-actions · 2025-05-07T21:45:18Z

Deployed dev-app for fe91543 to: https://ng-dev-previews-comp--pr-angular-components-31041-dev-jgj91wpx.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

crisbeto · 2025-05-19T10:58:17Z

src/material/chips/chip-row.html

+    class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary"
+    role="gridcell">
+    <ng-content select="[matChipEdit]"></ng-content>
+</span>


nit: formatting appears to be off here.

crisbeto · 2025-05-19T11:04:03Z

src/material/chips/chip-icons.ts

+    if ((event.keyCode === ENTER || event.keyCode === SPACE) && !this.disabled) {
+      event.stopPropagation();
+      event.preventDefault();
+      this._parentChip._edit();


This appears to allow editing even if the chip isn't marked as editable.

That's correct. Editable controls the double-click and focus-enter, the button logic is independent.

I suspect that may be confusing for developers using the component since the only way left to conditionally disable editing is by completely removing the edit icon.

crisbeto · 2025-05-19T11:05:40Z

src/material/chips/chip-icons.ts

+  selector: '[matChipEdit]',
+  host: {
+    'class':
+      'mat-mdc-chip-edit mat-mdc-chip-avatar mat-focus-indicator ' +


We shouldn't reuse the avatar class here since this isn't the avatar.

The focus indicator class already comes from whatever is used as the edit trigger (e.g. matButton).

Yeah, let me clean up the avatar usage. I added the leading-action concept later and think makes sense to keep them distinct all the way through now.

crisbeto · 2025-05-19T11:05:54Z

src/material/chips/chip-icons.ts

+ *
+ * ```
+ * <mat-chip>
+ *   <button matChipEdit aria-label="Edit">


Should the component show matIconButton?

We don't in the demo's and actually adding it breaks the styling, so don't want to put in example here. Something to clean up later perhaps though.

Ah I see. I assumed the demo was an icon button because of the ripple.

crisbeto · 2025-05-19T11:06:23Z

src/material/chips/chip-row.ts

@@ -107,6 +108,11 @@ export class MatChipRow extends MatChip implements AfterViewInit {
    });
  }

+  /** Returns whether the chip has a leading icon. */
+  _hasLeadingIcon() {


This one can be made protected so it's not exposed as a public API.

crisbeto · 2025-05-19T11:06:45Z

src/material/chips/chip-row.ts

@@ -107,6 +108,11 @@ export class MatChipRow extends MatChip implements AfterViewInit {
    });
  }

+  /** Returns whether the chip has a leading icon. */
+  _hasLeadingIcon() {
+    return !this._isEditing && !!(this.editIcon || this.leadingIcon);


Won't this end up hiding the avatar if the chip is being edited?

That was intentional, but I'm not actually not sure if that logic was omitted as no demo cases for editable chips with avatar or intentionally kept visibile (unlike remove icon). But that can be handled seperately, so I'll pull this out.

crisbeto · 2025-05-19T11:07:19Z

src/material/chips/chip-row.ts

@@ -158,7 +172,7 @@ export class MatChipRow extends MatChip implements AfterViewInit {
    afterNextRender(
      () => {
        this._getEditInput().initialize(value);
-        this._editStartPending = false;
+        setTimeout(() => this._ngZone.run(() => (this._editStartPending = false)));


Why do we need a timeout here?

I'll add a comment. When using the edit icon, need to have this timeout as otherwise subsequent blur will cancel the edit action.

crisbeto

Actually I also realized that we should add a live example for the docs site. The examples live under components-examples.

crisbeto · 2025-05-20T07:15:52Z

src/material/chips/chip-icons.ts

+ *
+ * ```
+ * <mat-chip>
+ *   <button matChipEdit aria-label="Edit">


Ah I see. I assumed the demo was an icon button because of the ripple.

crisbeto · 2025-05-20T07:17:31Z

src/material/chips/chip-icons.ts

+    if ((event.keyCode === ENTER || event.keyCode === SPACE) && !this.disabled) {
+      event.stopPropagation();
+      event.preventDefault();
+      this._parentChip._edit();


I suspect that may be confusing for developers using the component since the only way left to conditionally disable editing is by completely removing the edit icon.

adolgachev force-pushed the chip-edit-icon branch from 7c561e0 to c3dfdb3 Compare May 7, 2025 21:40

angular-robot bot added detected: feature PR contains a feature commit area: material/chips labels May 7, 2025

adolgachev changed the title ~~Chip edit icon~~ feat(material/chips): add (optional) edit icon to input chips May 7, 2025

adolgachev requested a review from crisbeto May 7, 2025 21:42

adolgachev added Accessibility This issue is related to accessibility (a11y) dev-app preview When applied, previews of the dev-app are deployed to Firebase requires: TGP This PR requires a passing TGP before merging is allowed labels May 7, 2025

adolgachev force-pushed the chip-edit-icon branch 2 times, most recently from c0b7505 to 0dfcea0 Compare May 17, 2025 15:09

adolgachev marked this pull request as ready for review May 17, 2025 15:10

adolgachev requested a review from a team as a code owner May 17, 2025 15:10

adolgachev requested review from wagnermaciel and removed request for a team May 17, 2025 15:10

adolgachev added action: review The PR is still awaiting reviews from at least one requested reviewer action: global presubmit The PR is in need of a google3 global presubmit labels May 17, 2025

adolgachev force-pushed the chip-edit-icon branch 2 times, most recently from 4960510 to 809e1e8 Compare May 17, 2025 21:59

adolgachev removed the action: global presubmit The PR is in need of a google3 global presubmit label May 17, 2025

crisbeto reviewed May 19, 2025

View reviewed changes

feat(material/chips): add (optional) edit icon to input chips

3dbe36d

adolgachev force-pushed the chip-edit-icon branch from b5951a7 to 3dbe36d Compare May 19, 2025 19:52

add comment

fe91543

crisbeto reviewed May 20, 2025

View reviewed changes

feat(material/chips): add (optional) edit icon to input chips #31041

Are you sure you want to change the base?

feat(material/chips): add (optional) edit icon to input chips #31041

Uh oh!

Conversation

adolgachev commented May 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented May 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

crisbeto left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

adolgachev commented May 7, 2025 •

edited

Loading

github-actions bot commented May 7, 2025 •

edited

Loading