Supports the following use cases:
- Submit on button click
- Reset native form fields when using type="reset"
- Submit on button enter or space keypress
- Submit on enter keypress inside an input
- A (lion)-button of type submit is mandatory for the last use case, if you have multiple inputs. This is native behavior.
<form>are triggered by these use cases. We strongly encourage you to listen to the submit handler if your goal is to do something on form-submit.
- To prevent form submission full page reloads, add a submit handler on the form
event.preventDefault(). Adding it on the
<lion-button>is not enough.
There are multiple reasons why we used a Web Component as opposed to a CSS component.
- Target size: The minimum target size is 40 pixels, which makes even the small buttons easy to activate. A container element was needed to make this size possible.
- Advanced styling: There are advanced styling options regarding icons in buttons, where it is a lot more maintainable to handle icons in our button using slots. An example is that a sticky icon-only buttons may looks different from buttons which have both icons and text.
- Native form integration: The lion button works with native
<form>submission, and even implicit form submission on-enter. A lot of delegation logic had to be created for this to work.
We want to ensure that the event target returned to the user is
button. Therefore, simply delegating the click to the native button immediately, is not desired. Instead, we catch the click event in the
<lion-button>, and ensure delegation inside of there.
By delegating the
click() to the native button, it will bubble back up to
<lion-button> which would cause duplicate actions. We have to simulate the full
.click() however, otherwise form submission is not triggered. So this bubbling cannot be prevented.
Therefore, on click, we flash a
<button> to the form as a direct child and fire the click on that button. We then immediately remove that button. This is a fully synchronous process; users or developers will not notice this, it should not cause problems.
Flashing the button in the way we do solves almost all issues except for one. One of the specs of W3C is that when you have a form with multiple inputs, pressing enter while inside one of the inputs only triggers a form submit if that form has a button of type submit.
To get this particular implicit form submission to work, having a native button in our
<lion-button> is a hard requirement.
Therefore, not only do we flash a native button on the form to delegate
<lion-button> trigger to
and thereby trigger form submission, we also add a native
button inside the
type property is synchronized with the type of the