fix(chips): avoid accidental form submits when pressing remove… (#18095)

Sets a `type` on chip remove button so that parent forms don't get submitted by accident.

Author: crisbeto

src/material-experimental/mdc-chips/chip-icons.ts

@@ -112,6 +112,9 @@ const _MatChipRemoveMixinBase:
     '(click)': 'interaction.next($event)',
     '(keydown)': 'interaction.next($event)',
 
+    // Prevent accidental form submissions.
+    'type': 'button',
+
     // We need to remove this explicitly, because it gets inherited from MatChipTrailingIcon.
     '[attr.aria-hidden]': 'null',
   }

src/material-experimental/mdc-chips/chip-remove.spec.ts

@@ -37,6 +37,12 @@ describe('MDC-based Chip Remove', () => {
       expect(buttonElement.classList).toContain('mat-mdc-chip-remove');
     });
 
+    it('should ensure that the button cannot submit its parent form', () => {
+      const buttonElement = chipNativeElement.querySelector('button')!;
+
+      expect(buttonElement.getAttribute('type')).toBe('button');
+    });
+
     it('should start MDC exit animation on click', () => {
       let buttonElement = chipNativeElement.querySelector('button')!;
 

src/material/chips/chip-remove.spec.ts

@@ -30,12 +30,18 @@ describe('Chip Remove', () => {
   }));
 
   describe('basic behavior', () => {
-    it('should applies the `mat-chip-remove` CSS class', () => {
+    it('should apply the `mat-chip-remove` CSS class', () => {
       let buttonElement = chipNativeElement.querySelector('button')!;
 
       expect(buttonElement.classList).toContain('mat-chip-remove');
     });
 
+    it('should ensure that the button cannot submit its parent form', () => {
+      const buttonElement = chipNativeElement.querySelector('button')!;
+
+      expect(buttonElement.getAttribute('type')).toBe('button');
+    });
+
     it('should emits (removed) on click', () => {
       let buttonElement = chipNativeElement.querySelector('button')!;
 

src/material/chips/chip.ts

@@ -415,6 +415,9 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
   host: {
     'class': 'mat-chip-remove mat-chip-trailing-icon',
     '(click)': '_handleClick($event)',
+
+    // Prevent accidental form submissions.
+    'type': 'button',
   }
 })
 export class MatChipRemove {