From 674eea2149f9c0d72ed8a1861bd6382d834b2640 Mon Sep 17 00:00:00 2001
From: Zach Arend <zachzach@google.com>
Date: Sat, 20 May 2023 00:36:41 +0000
Subject: [PATCH] fix(material/chips): fix click target when stacked

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
---
 src/dev-app/chips/chips-demo.html | 25 ++++++++++++++++++++++++-
 src/material/chips/chip-set.scss  |  9 +++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/dev-app/chips/chips-demo.html b/src/dev-app/chips/chips-demo.html
index b52cf0511189..894a2a2c60b1 100644
--- a/src/dev-app/chips/chips-demo.html
+++ b/src/dev-app/chips/chips-demo.html
@@ -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"
@@ -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>
diff --git a/src/material/chips/chip-set.scss b/src/material/chips/chip-set.scss
index b2f9b3ff9a93..3ff0bb4d8a37 100644
--- a/src/material/chips/chip-set.scss
+++ b/src/material/chips/chip-set.scss
@@ -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 {