PolymerElements / paper-dialog

A Material Design dialog
https://www.webcomponents.org/element/PolymerElements/paper-dialog
63 stars 41 forks source link

paper-dialog modal with form, can't get submit event handler to fire #149

Closed runia1 closed 7 years ago

runia1 commented 7 years ago

Description

I cannot get 2.0-preview to fire events.

    <paper-dialog id="modal" modal>
      <paper-dialog-scrollable>
        <iron-from id="giveForm" on-iron-form-presubmit="_giveFormSubmitted">
          <form id="giveFormChild">
            <input type="hidden" id="registryId" name="registryId" />
          </form>
        </iron-from>
      </paper-dialog-scrollable>
      <div class="buttons">
        <paper-button on-tap="_closeClicked">Close</paper-button>
        <paper-button on-tap="_giveClicked">Give</paper-button>
      </div>
    </paper-dialog>

In my class:

_giveFormSubmitted(e) {
        e.preventDefault();
        console.log('give form submitted');

        //const formData = this.$.giveForm.serializeForm();
        //console.dir(formData);
}

the handler never gets fired. Just refreshes the page with the form values in url, like a normal submit. Is there something obvious that I'm doing wrong? It's not <iron-form> as I've tried just a normal <form> listening to submit and that doesn't get fired either. I think it has something to do with the way <paper-dialog> handles modals but I have no idea.

Browsers Affected

valdrinkoshi commented 7 years ago

Hi @runia1 There is not yet a 2.0 release for <iron-form>, follow this PR for more details.

I've tried locally this snippet with <form> and i correctly receive the submit events:

<paper-dialog opened>
  <h2>Dialog Title</h2>
  <form id="form">
    <input type="text" name="user">
    <input type="submit" value="submit">
  </form>
</paper-dialog>
<script>
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    console.log('submitted');
  });
</script>