Skip to content

Commit

Permalink
fix(material/chips): fix click target when stacked (#27129)
Browse files Browse the repository at this point in the history
Ensure that the click target of stacked chips is the entire width of the
chip. Fix issue where applying .mat-mdc-chip-set-stacked causes chips to
respond to clicks when clicking on the text; did not respond when
clicking inside the chip but not over the text (#26590).

Ensure the clickable elemen tof the chip takes up the whole visual area
of the chip by overriding styles from MDC library. Angular Material
supports vertically-stacked chips, which MDC does not.

Fix #26590

(cherry picked from commit 2c07867)
  • Loading branch information
zarend committed May 31, 2023
1 parent 08206fc commit c8065d5
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 1 deletion.
25 changes: 24 additions & 1 deletion src/dev-app/chips/chips-demo.html
Expand Up @@ -251,7 +251,7 @@ <h4>NgModel with single selection</h4>

The selected color is {{selectedColor}}.

<h4>Single selection without checkmark indicator.</h4>
<h4>Single selection without checkmark selection indicator.</h4>

<mat-chip-listbox [(ngModel)]="selectedColor" [hideSingleSelectionIndicator]="true">
<mat-chip-option *ngFor="let aColor of availableColors" [color]="aColor.color"
Expand All @@ -260,6 +260,29 @@ <h4>Single selection without checkmark indicator.</h4>
</mat-chip-option>
</mat-chip-listbox>

<h4>Single selection with decorative icons.</h4>

<mat-chip-listbox [(ngModel)]="selectedColor" [hideSingleSelectionIndicator]="true">
<mat-chip-option *ngFor="let aColor of availableColors" [color]="aColor.color"
[value]="aColor.name">
<mat-icon matChipAvatar>home</mat-icon>
{{aColor.name}}
<mat-icon matChipTrailingIcon>star</mat-icon>
</mat-chip-option>
</mat-chip-listbox>

The selected color is {{selectedColor}}.

<h4>Single selection with stacked appearance.</h4>

<mat-chip-listbox [(ngModel)]="selectedColor" class="mat-mdc-chip-set-stacked">
<mat-chip-option *ngFor="let aColor of availableColors" [color]="aColor.color"
[value]="aColor.name">
{{aColor.name}}
<mat-icon matChipTrailingIcon>star</mat-icon>
</mat-chip-option>
</mat-chip-listbox>

The selected color is {{selectedColor}}.
</mat-card-content>
</mat-card>
Expand Down
9 changes: 9 additions & 0 deletions src/material/chips/chip-set.scss
Expand Up @@ -19,6 +19,15 @@
.mat-mdc-chip {
width: 100%;
}

.mdc-evolution-chip__graphic {
flex-grow: 0;
}

.mdc-evolution-chip__action--primary {
flex-basis: 100%;
justify-content: start;
}
}

input.mat-mdc-chip-input {
Expand Down

0 comments on commit c8065d5

Please sign in to comment.