pat-modal: Form without injection not submitted

[reinhardt]

When creating a modal that contains

• a form without pat-inject and
• a submit button with the "close-panel" class

then the form is not submitted when clicking the submit button.

When omitting the class "close-panel" then the submit works, but the modal is not closed. This is a workaround, but it should be possible to close the modal on submit.

There is indeed specific code for this:

https://github.com/Patternslib/Patterns/blob/1464d7b4dbdfde4700677f2e5dfb769f1f72c346/src/pat/modal/modal.js#L173-L177

The code itself seems to work but the submit is aborted after the modal (and with it the form) is removed. In the debug console there is the message "Form submission canceled because the form is not connected". It looks like we need to somehow wait for the submit to finish before destroying the modal, similar to the case with injection.

Markup example:

<form class="wizard-box" action="..." method="post">
    <div class="panel-body">
          <label class="unchecked">
            <input name="uid:list" type="checkbox" value="ae55bfea261d499ca433be48495603e6">
            Front Page
          </label>
      </div>
    </div>
    <div class="buttons panel-footer">
      <div class="container">
          <button class="close-panel icon-download" id="form-buttons-download" type="submit" value="1">Download PDF</button>
          <button class="close-panel icon-cancel-circle validate-ignore" type="button">Cancel</button>
      </div>
    </div>
</form>

[reinhardt]

I wonder whether it would work if we bound to the submit event instead of the click event... It happens later and maybe we don't care about the form being in the DOM at this point.