fix(material/chips): handle matChipRemove set on a button (#23538)

Fixes that `matChipRemove` looked off when it's set on a `button` element. Also updates all the examples to use buttons. Note that we don't need any extra logic, because the `MatChipRemove` directive already sets `type="button"` when it's applied to a `button` element. Fixes #23463. (cherry picked from commit bb9c36b)
angular · Sep 10, 2021 · b12018a · b12018a
1 parent 3bb9bd4
commit b12018a
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 23 deletions.
diff --git a/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.html b/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.html
@@ -7,7 +7,9 @@
       [removable]="removable"
       (removed)="remove(fruit)">
       {{fruit}}
-      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
+      <button matChipRemove *ngIf="removable">
+        <mat-icon>cancel</mat-icon>
+      </button>
     </mat-chip>
     <input
       placeholder="New fruit..."

diff --git a/src/components-examples/material/chips/chips-input/chips-input-example.html b/src/components-examples/material/chips/chips-input/chips-input-example.html
@@ -4,7 +4,9 @@
     <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
              [removable]="removable" (removed)="remove(fruit)">
       {{fruit.name}}
-      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
+      <button matChipRemove *ngIf="removable">
+        <mat-icon>cancel</mat-icon>
+      </button>
     </mat-chip>
     <input placeholder="New fruit..."
            [matChipInputFor]="chipList"

diff --git a/src/dev-app/chips/chips-demo.html b/src/dev-app/chips/chips-demo.html
@@ -27,7 +27,9 @@ <h4>Advanced</h4>
         <mat-chip color="warn" selected="true" *ngIf="visible"
                  (destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
           With Events
-          <mat-icon matChipRemove>cancel</mat-icon>
+          <button matChipRemove>
+            <mat-icon>cancel</mat-icon>
+          </button>
         </mat-chip>
       </mat-chip-list>
       <div>{{message}}</div>
@@ -39,12 +41,16 @@ <h4>With avatar and icons</h4>
         <mat-chip disabled>
           <mat-icon matChipAvatar>home</mat-icon>
           Home
-          <mat-icon matChipRemove>cancel</mat-icon>
+          <button matChipRemove>
+            <mat-icon>cancel</mat-icon>
+          </button>
         </mat-chip>
         <mat-chip color="accent" selected="true">
           <mat-chip-avatar>P</mat-chip-avatar>
           Portel
-          <mat-icon matChipRemove>cancel</mat-icon>
+          <button matChipRemove>
+            <mat-icon>cancel</mat-icon>
+          </button>
         </mat-chip>
 
         <mat-chip>
@@ -54,7 +60,9 @@ <h4>With avatar and icons</h4>
 
         <mat-chip>
           Koby
-          <mat-icon matChipRemove>cancel</mat-icon>
+          <button matChipRemove>
+            <mat-icon>cancel</mat-icon>
+          </button>
         </mat-chip>
 
         <mat-chip>
@@ -69,7 +77,9 @@ <h4>With avatar and icons</h4>
         <mat-chip selected="true" color="warn">
           <img src="https://material.angularjs.org/material2_assets/ngconf/Husi.png" matChipAvatar>
           Husi
-          <mat-icon matChipRemove>cancel</mat-icon>
+          <button matChipRemove>
+            <mat-icon>cancel</mat-icon>
+          </button>
         </mat-chip>
 
         <mat-chip>
@@ -104,7 +114,9 @@ <h4>Form Field</h4>
           <mat-chip  *ngFor="let person of people" [color]="color" [selectable]="selectable"
                    [removable]="removable" (removed)="remove(person)">
             {{person.name}}
-            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
+            <button matChipRemove *ngIf="removable">
+              <mat-icon>cancel</mat-icon>
+            </button>
           </mat-chip>
           <input placeholder="New Contributor..."
                  [matChipInputFor]="chipList1"
@@ -127,7 +139,9 @@ <h4>Form Field</h4>
           <mat-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
                    [removable]="removable" (removed)="remove(person)">
             {{person.name}}
-            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
+            <button matChipRemove *ngIf="removable">
+              <mat-icon>cancel</mat-icon>
+            </button>
           </mat-chip>
         </mat-chip-list>
         <input placeholder="New Contributor..."
@@ -148,7 +162,9 @@ <h4>Form Field</h4>
           <mat-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
                    [removable]="removable" (removed)="remove(person)">
             {{person.name}}
-            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
+            <button matChipRemove *ngIf="removable">
+              <mat-icon>cancel</mat-icon>
+            </button>
           </mat-chip>
         </mat-chip-list>
       </mat-form-field>
@@ -185,7 +201,9 @@ <h4>NgModel with chip list</h4>
         <mat-chip *ngFor="let aColor of availableColors" [color]="aColor.color"
                  [value]="aColor.name" (removed)="removeColor(aColor)">
           {{aColor.name}}
-          <mat-icon matChipRemove>cancel</mat-icon>
+          <button matChipRemove>
+            <mat-icon>cancel</mat-icon>
+          </button>
         </mat-chip>
       </mat-chip-list>
 
@@ -196,7 +214,9 @@ <h4>NgModel with single selection chip list</h4>
         <mat-chip *ngFor="let aColor of availableColors" [color]="aColor.color"
                  [value]="aColor.name" (removed)="removeColor(aColor)">
           {{aColor.name}}
-          <mat-icon matChipRemove>cancel</mat-icon>
+          <button matChipRemove>
+            <mat-icon>cancel</mat-icon>
+          </button>
         </mat-chip>
       </mat-chip-list>
 

diff --git a/src/dev-app/mdc-chips/mdc-chips-demo.html b/src/dev-app/mdc-chips/mdc-chips-demo.html
@@ -25,13 +25,17 @@ <h4>With avatar, icons, and color</h4>
         <mat-chip disabled>
           <mat-icon matChipAvatar>home</mat-icon>
           Home
-          <mat-icon matChipRemove>cancel</mat-icon>
+          <button matChipRemove>
+            <mat-icon>cancel</mat-icon>
+          </button>
         </mat-chip>
 
         <mat-chip highlighted="true" color="accent">
           <mat-chip-avatar>P</mat-chip-avatar>
           Portel
-          <mat-icon matChipRemove>cancel</mat-icon>
+          <button matChipRemove>
+            <mat-icon>cancel</mat-icon>
+          </button>
         </mat-chip>
 
         <mat-chip>
@@ -41,7 +45,9 @@ <h4>With avatar, icons, and color</h4>
 
         <mat-chip>
           Koby
-          <mat-icon matChipRemove>cancel</mat-icon>
+          <button matChipRemove>
+            <mat-icon>cancel</mat-icon>
+          </button>
         </mat-chip>
 
         <mat-chip>
@@ -56,7 +62,9 @@ <h4>With avatar, icons, and color</h4>
         <mat-chip highlighted="true" color="warn">
           <img src="https://material.angularjs.org/material2_assets/ngconf/Husi.png" matChipAvatar>
           Husi
-          <mat-icon matChipRemove>cancel</mat-icon>
+          <button matChipRemove>
+            <mat-icon>cancel</mat-icon>
+          </button>
         </mat-chip>
 
         <mat-chip>
@@ -77,7 +85,9 @@ <h4>With Events</h4>
         <mat-chip highlighted="true" color="warn" *ngIf="visible"
                  (destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
           With Events
-          <mat-icon matChipRemove>cancel</mat-icon>
+          <button matChipRemove>
+            <mat-icon>cancel</mat-icon>
+          </button>
         </mat-chip>
       </mat-chip-set>
       <div>{{message}}</div>
@@ -142,7 +152,9 @@ <h4>Input is last child of chip grid</h4>
                    (removed)="remove(person)"
                    (edited)="edit(person, $event)">
             {{person.name}}
-            <mat-icon matChipRemove>cancel</mat-icon>
+            <button matChipRemove>
+              <mat-icon>cancel</mat-icon>
+            </button>
           </mat-chip-row>
           <input [disabled]="disableInputs"
                  [matChipInputFor]="chipGrid1"
@@ -159,7 +171,9 @@ <h4>Input is next sibling child of chip grid</h4>
         <mat-chip-grid #chipGrid2 [(ngModel)]="selectedPeople" required [disabled]="disableInputs">
           <mat-chip-row *ngFor="let person of people" (removed)="remove(person)">
             {{person.name}}
-            <mat-icon matChipRemove>cancel</mat-icon>
+            <button matChipRemove>
+              <mat-icon>cancel</mat-icon>
+            </button>
           </mat-chip-row>
         </mat-chip-grid>
         <input [matChipInputFor]="chipGrid2"

diff --git a/src/material-experimental/mdc-chips/README.md b/src/material-experimental/mdc-chips/README.md
@@ -102,7 +102,9 @@ To use chips with an input, use the `<mat-chip-grid>` with `<mat-chip-row>`:
       <mat-chip-row *ngFor="let person of people"
                    (removed)="remove(person)">
         {{person.name}}
-        <mat-icon matChipRemove>cancel</mat-icon>
+        <button matChipRemove>
+          <mat-icon>cancel</mat-icon>
+        </button>
       </mat-chip-row>
       <input [matChipInputFor]="myChipGrid"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"

diff --git a/src/material-experimental/mdc-chips/chips.scss b/src/material-experimental/mdc-chips/chips.scss
@@ -126,6 +126,21 @@ $chip-margin: 4px;
   position: relative;
 }
 
+.mat-mdc-chip-remove {
+  // Reset the user agent styles in case a button is used.
+  border: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  padding: 0;
+  background: none;
+
+  .mat-icon {
+    width: inherit;
+    height: inherit;
+    font-size: inherit;
+  }
+}
+
 .mat-mdc-chip-row-focusable-text-content,
 .mat-mdc-chip-remove-icon {
   display: flex;

diff --git a/src/material/chips/chips.scss b/src/material/chips/chips.scss
@@ -54,9 +54,19 @@ $chip-remove-size: 18px;
   // anything since it's less than the minimum set above.
   height: 1px;
 
-  .mat-chip-remove.mat-icon {
-    width: $chip-remove-size;
-    height: $chip-remove-size;
+  .mat-chip-remove {
+    // Reset the user agent styles in case a button is used.
+    border: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    padding: 0;
+    background: none;
+
+    &.mat-icon, .mat-icon {
+      width: $chip-remove-size;
+      height: $chip-remove-size;
+      font-size: $chip-remove-size;
+    }
   }
 
   // Overlay used to darken the chip on hover and focus.