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) { __clickDelegationHandler() {
if (!e.__isRedispatchedOnNativeButton) { if (this.type === 'submit' && this._nativeButtonNode.form) {
e.stopImmediatePropagation(); this._nativeButtonNode.form.submit();
this._redispatchClickEvent(e);
} }
} }

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

@ -35,9 +35,10 @@ storiesOf('Buttons|Button', module)
.add( .add(
'Within a form', 'Within a form',
() => html` () => html`
<lion-form id="form" <lion-form id="form" @submit=${() => console.log('form submitted')}
><form> ><form>
<lion-input name="foo" label="Foo" .modelValue=${'bar'}></lion-input> <lion-input name="foo" label="Foo" .modelValue=${'bar'}></lion-input>
<lion-input name="foo2" label="Foo2" .modelValue=${'bar'}></lion-input>
<lion-button <lion-button
type="submit" type="submit"
@click=${() => console.log(document.querySelector('#form').serializeGroup())} @click=${() => console.log(document.querySelector('#form').serializeGroup())}
@ -46,4 +47,16 @@ storiesOf('Buttons|Button', module)
</form></lion-form </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>
`;
});