elm-bootstrap icon indicating copy to clipboard operation
elm-bootstrap copied to clipboard

Modal header "close" button should have `type="button"`

Open glasserc opened this issue 5 years ago • 0 comments

It can be convenient to submit HTML forms using the Enter key. When the user hits the Enter key in an HTML form, a process of "implicit submission" plays out. How this works is that the user agent looks for the containing <form> element, finds the first "submit" button (i.e. type="submit", which is the default for <button> elements), and fires a synthetic "click" event at it.

A use case for a Bootstrap modal is to contain a form. In this setup, you might have the form fields in the modal "body" and the submit button in the modal "footer". With the existing API, there's no way to include a <form> element containing just the modal body and footer, so you may decide to put the whole modal inside a <form>.

However, if you try this, the "close" button in the modal header will also be contained. This has some surprising side effects:

  • Hitting Enter will click the "close" button rather than any button in the footer.
  • Because the "close" button does not have an explicit type, its type is submit, which means that clicking it submits the form, causing a page refresh.

At present, I could find no way to control or modify this button. Even if there were, there's a good argument for having sensible defaults.

For these reasons, I'd like to request putting type="button" on the modal "close" button.

glasserc avatar Jan 18 '20 03:01 glasserc