feat(material/chips): add (optional) edit icon to input chips #31041
+250
−24
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular-robot
bot
added
detected: feature
adolgachev
changed the title
adolgachev
added
Accessibility
|
Deployed dev-app for 809e1e8 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. |
adolgachev
force-pushed
the
chip-edit-icon
branch
2 times, most recently
from
c0b7505 to
0dfcea0
Compare
adolgachev
added
action: review
adolgachev
force-pushed
the
chip-edit-icon
branch
from
5a782e6 to
d5b2141
Compare
adolgachev
force-pushed
the
chip-edit-icon
branch
from
4960510 to
809e1e8
Compare
adolgachev
removed
the
action: global presubmit
crisbeto
reviewed
May 19, 2025
| class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" | ||
| role="gridcell"> | ||
| <ng-content select="[matChipEdit]"></ng-content> | ||
| </span> |
There was a problem hiding this comment.
nit: formatting appears to be off here.
| if ((event.keyCode === ENTER || event.keyCode === SPACE) && !this.disabled) { | ||
| event.stopPropagation(); | ||
| event.preventDefault(); | ||
| this._parentChip._edit(); |
There was a problem hiding this comment.
This appears to allow editing even if the chip isn't marked as editable.
| selector: '[matChipEdit]', | ||
| host: { | ||
| 'class': | ||
| 'mat-mdc-chip-edit mat-mdc-chip-avatar mat-focus-indicator ' + |
There was a problem hiding this comment.
- 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).
| * | ||
| * ``` | ||
| * <mat-chip> | ||
| * <button matChipEdit aria-label="Edit"> |
There was a problem hiding this comment.
Should the component show matIconButton?
| @@ -107,6 +108,11 @@ export class MatChipRow extends MatChip implements AfterViewInit { | |||
| }); | |||
| } | |||
|
|
|||
| /** Returns whether the chip has a leading icon. */ | |||
| _hasLeadingIcon() { | |||
There was a problem hiding this comment.
This one can be made protected so it's not exposed as a public API.
| @@ -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); | |||
There was a problem hiding this comment.
Won't this end up hiding the avatar if the chip is being edited?
| @@ -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))); | |||
There was a problem hiding this comment.
Why do we need a timeout here?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.