chore(button): re-add and test 'type=reset' feature with native form
This commit is contained in:
parent
d19ca7cc5c
commit
7995dfced5
3 changed files with 28 additions and 1 deletions
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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());
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue