chore(button): re-add and test 'type=reset' feature with native form

This commit is contained in:
Joren Broekema 2019-10-21 08:18:03 +02:00
parent d19ca7cc5c
commit 7995dfced5
3 changed files with 28 additions and 1 deletions

View file

@ -188,9 +188,10 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
e.stopPropagation(); e.stopPropagation();
} }
if (this.type === 'submit' && e.target === this) { if ((this.type === 'submit' || this.type === 'reset') && e.target === this) {
if (this._form) { if (this._form) {
const nativeButton = document.createElement('button'); const nativeButton = document.createElement('button');
nativeButton.type = this.type;
this._form.appendChild(nativeButton); this._form.appendChild(nativeButton);
nativeButton.click(); nativeButton.click();
this._form.removeChild(nativeButton); this._form.removeChild(nativeButton);

View file

@ -54,6 +54,9 @@ storiesOf('Buttons|Button', module)
<li> <li>
Submit on button click Submit on button click
</li> </li>
<li>
Reset native form fields when using type="reset"
</li>
<li> <li>
Submit on button enter or space keypress Submit on button enter or space keypress
</li> </li>

View file

@ -270,6 +270,29 @@ describe('lion-button', () => {
expect(formSubmitSpy.callCount).to.equal(1); expect(formSubmitSpy.callCount).to.equal(1);
}); });
it('supports resetting form inputs in a native form', async () => {
const form = await fixture(html`
<form>
<input name="firstName" />
<input name="lastName" />
<lion-button type="reset">reset</lion-button>
</form>
`);
const btn = form.querySelector('lion-button');
const firstName = form.querySelector('input[name=firstName]');
const lastName = form.querySelector('input[name=lastName]');
firstName.value = 'Foo';
lastName.value = 'Bar';
expect(firstName.value).to.equal('Foo');
expect(lastName.value).to.equal('Bar');
btn.click();
expect(firstName.value).to.be.empty;
expect(lastName.value).to.be.empty;
});
// input "enter" keypress mock doesn't seem to work right now, but should be tested in the future (maybe with Selenium) // input "enter" keypress mock doesn't seem to work right now, but should be tested in the future (maybe with Selenium)
it.skip('works with implicit form submission on-enter inside an input', async () => { it.skip('works with implicit form submission on-enter inside an input', async () => {
const formSubmitSpy = sinon.spy(e => e.preventDefault()); const formSubmitSpy = sinon.spy(e => e.preventDefault());