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();
|
||||
}
|
||||
|
||||
if (this.type === 'submit' && e.target === this) {
|
||||
if ((this.type === 'submit' || this.type === 'reset') && e.target === this) {
|
||||
if (this._form) {
|
||||
const nativeButton = document.createElement('button');
|
||||
nativeButton.type = this.type;
|
||||
this._form.appendChild(nativeButton);
|
||||
nativeButton.click();
|
||||
this._form.removeChild(nativeButton);
|
||||
|
|
|
|||
|
|
@ -54,6 +54,9 @@ storiesOf('Buttons|Button', module)
|
|||
<li>
|
||||
Submit on button click
|
||||
</li>
|
||||
<li>
|
||||
Reset native form fields when using type="reset"
|
||||
</li>
|
||||
<li>
|
||||
Submit on button enter or space keypress
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -270,6 +270,29 @@ describe('lion-button', () => {
|
|||
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)
|
||||
it.skip('works with implicit form submission on-enter inside an input', async () => {
|
||||
const formSubmitSpy = sinon.spy(e => e.preventDefault());
|
||||
|
|
|
|||
Loading…
Reference in a new issue