ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(button): change redispatch click logic so form submit fires properly

Browse source
This commit is contained in:
Joren Broekema 2019-09-19 17:40:57 +02:00
parent 1ef9535a75
commit 94818e40fb
2 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/button/src/LionButton.js
View file

@ -176,12 +176,11 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
}
/**
* Prevent normal click and redispatch click on the native button unless already redispatched.
* Prevent normal click and redispatch submit on the native button unless already redispatched.
*/
__clickDelegationHandler(e) {
if (!e.__isRedispatchedOnNativeButton) {
e.stopImmediatePropagation();
this._redispatchClickEvent(e);
__clickDelegationHandler() {
if (this.type === 'submit' && this._nativeButtonNode.form) {
this._nativeButtonNode.form.submit();
}
}

17
packages/button/stories/index.stories.js
View file

@ -35,9 +35,10 @@ storiesOf('Buttons|Button', module)
.add(
'Within a form',
() => html`
<lion-form id="form"
<lion-form id="form" @submit=${() => console.log('form submitted')}
><form>
<lion-input name="foo" label="Foo" .modelValue=${'bar'}></lion-input>
<lion-input name="foo2" label="Foo2" .modelValue=${'bar'}></lion-input>
<lion-button
type="submit"
@click=${() => console.log(document.querySelector('#form').serializeGroup())}
@ -46,4 +47,16 @@ storiesOf('Buttons|Button', module)
</form></lion-form
>
`,
);
)
.add('Within another form', () => {
const submitForm = () => console.log('hey');
return html`
<form id="form" @submit=${submitForm}>
<h3>Details</h3>
<input name="input1" />
<input name="input2" />
<input name="input3" />
<lion-button>Submit</lion-button>
</form>
`;
});