elm-bootstrap
elm-bootstrap copied to clipboard
Modal header "close" button should have `type="button"`
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.