feat(Dialog): don't override type attribute if set on mat-dialog-close (#16927)

* feat(Dialog): don't override type attribute if set on mat-dialog-close

only default the type attribute on mat-dialog-close if it isn't set

#16909

* chore(Dialog): renamed buttonType to type in mat-dialog-close

#16909

Author: flauc

src/material/dialog/dialog-content-directives.ts

@@ -30,13 +30,16 @@ let dialogElementUid = 0;
   host: {
     '(click)': 'dialogRef.close(dialogResult)',
     '[attr.aria-label]': 'ariaLabel || null',
-    'type': 'button', // Prevents accidental form submits.
+    '[attr.type]': 'type',
   }
 })
 export class MatDialogClose implements OnInit, OnChanges {
   /** Screenreader label for the button. */
   @Input('aria-label') ariaLabel: string;
 
+  /** Default to "button" to prevents accidental form submits. */
+  @Input() type: 'submit' | 'button' | 'reset' = 'button';
+
   /** Dialog close input. */
   @Input('mat-dialog-close') dialogResult: any;
 

src/material/dialog/dialog.spec.ts

@@ -1204,12 +1204,18 @@ describe('MatDialog', () => {
         expect(button.getAttribute('aria-label')).toBe('Best close button ever');
       }));
 
-      it('should override the "type" attribute of the close button', () => {
+      it('should set the "type" attribute of the close button if not set manually', () => {
         let button = overlayContainerElement.querySelector('button[mat-dialog-close]')!;
 
         expect(button.getAttribute('type')).toBe('button');
       });
 
+      it('should not override type attribute of the close button if set manually', () => {
+        let button = overlayContainerElement.querySelector('button.with-submit')!;
+
+        expect(button.getAttribute('type')).toBe('submit');
+      });
+
       it('should return the [mat-dialog-close] result when clicking the close button',
         fakeAsync(() => {
           let afterCloseCallback = jasmine.createSpy('afterClose callback');
@@ -1557,6 +1563,7 @@ class PizzaMsg {
         aria-label="Best close button ever"
         [mat-dialog-close]="true"></button>
       <div mat-dialog-close>Should not close</div>
+      <button class="with-submit" type="submit" mat-dialog-close>Should have submit</button>
     </mat-dialog-actions>
   `
 })
@@ -1575,6 +1582,7 @@ class ContentElementDialog {}
           aria-label="Best close button ever"
           [mat-dialog-close]="true"></button>
         <div mat-dialog-close>Should not close</div>
+        <button class="with-submit" type="submit" mat-dialog-close>Should have submit</button>
       </mat-dialog-actions>
     </ng-template>
   `

tools/public_api_guard/material/dialog.d.ts

@@ -49,6 +49,7 @@ export declare class MatDialogClose implements OnInit, OnChanges {
     ariaLabel: string;
     dialogRef: MatDialogRef<any>;
     dialogResult: any;
+    type: 'submit' | 'button' | 'reset';
     constructor(dialogRef: MatDialogRef<any>, _elementRef: ElementRef<HTMLElement>, _dialog: MatDialog);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;