Components: Closing MdDialog with md-dialog-close on button refreshes page

[JDillon522]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

I prepopulate a form inside of an MdDialog with data. I can click on a cancel button to close the dialog. That button is:

<button md-icon-button md-mini-fab color="warn" md-dialog-close>
   <md-icon  class="material-icons">cancel</md-icon>
</button>

The dialog then closes with no issues.

What is the current behavior?

When I click on the close button it refreshes the page with a query string containing the serialized data of the form.

What are the steps to reproduce?

Dialog component html:

<h3>Edit a User:</h3>
<form class="userForm">
  <md-input-container class="firstName">
    <input
      md-input
      placeholder="First Name"
      [(ngModel)]="first_name"
      name="first_name"
      type="text"
      required
      >
  </md-input-container>

  <md-input-container class="lastName">
    <input
      md-input
      placeholder="Last Name"
      [(ngModel)]="last_name"
      name="last_name"
      type="text"
      required
      >
  </md-input-container>

  <br>

  <md-input-container class="email">
    <input
      md-input
      placeholder="Email"
      [(ngModel)]="email"
      name="email"
      type="email"
      required
      >
  </md-input-container>

  <br>

  <div class="userActionButtonGroup">
    <button md-icon-button md-mini-fab color="accent" (click)="editUser()">
      <md-icon  class="material-icons">done</md-icon>
    </button>
    <button md-icon-button md-mini-fab color="warn" md-dialog-close>
      <md-icon  class="material-icons">cancel</md-icon>
    </button>
  </div>

</form>

typescript:

import { Component, OnInit } from '@angular/core';
import { MdDialog, MdDialogRef } from '@angular/material';
import { User } from '../../../services/user';
import { UsersService } from '../../../services/users.service';

@Component({
  selector: 'app-edit-user',
  templateUrl: './edit-user.component.html',
  styleUrls: ['./edit-user.component.scss'],
  providers: [ UsersService ]
})
export class EditUserComponent implements OnInit {
  private errorMessage: string;
  public id: number;
  public first_name: string;
  public last_name: string;
  public email: string

  constructor(
    private usersService: UsersService,
    private dialogRef: MdDialogRef<EditUserComponent>
  ) { }

  ngOnInit() {
  }

  editUser() {
    let thisUser = {
      first_name: this.first_name,
      last_name: this.last_name,
      email: this.email
    };

    this.usersService.editUser(this.id, thisUser)
                      .subscribe(
                        (user) => {
                          this.dialogRef.close('updateUsers');
                        }, (error) => {
                          this.errorMessage = <any>error;
                        });
  }
}

#### Which versions of Angular, Material, OS, browsers are affected?

angular-cli: 1.0.0-beta.24
node: 6.9.3
os: darwin x64
@angular/common: 2.4.2
@angular/compiler: 2.4.2
@angular/core: 2.4.2
@angular/forms: 2.4.2
@angular/http: 2.4.2
@angular/material: 2.0.0-beta.1
@angular/platform-browser: 2.4.2
@angular/platform-browser-dynamic: 2.4.2
@angular/router: 3.4.2
@angular/compiler-cli: 2.4.2
```

Is there anything else we should know?

I have the exact same functionality on two other dialogs except that those two are not prepopulated with forms.

[crisbeto]

It's because the button ends up submitting the form by default. You should be able to work around it by setting type="button" on it. @jelbourn do you think that this is something that we should handle automatically?

[JDillon522]

That fixed it. The odd part is that it only occurred on that dialog when its form had pre-populated data. The other dialogs I have with forms dont do that.

[jelbourn]

I think it would be reasonable to have the dialog-close-button always set type="button"

[karolmie1]

@crisbeto @jelbourn This does not work! Remember, that you can close form also with pushing enter button, and that would fire submit event (and thus cause reload) even if you've specified the button to be type="button" (learned it the hard way). The only way is to do something like this:

<form role="form" (submit)="close($event, filterValue.value)">
  <input #filterValue/>
  <button type="submit">Szukaj</button>
</form>

private close(event: Event, value: string) {
  event.preventDefault();
  this.dialogRef.close(value);
}

Thats not really a bug with material, more like inconvenience within angular.
Should be described in documentation though.

[jelbourn]

Pressing enter will only submit the form if there is a submit button inside of the form.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

<sub>_This action has been performed automatically by a bot._</sub>