fix(input-datepicker): prevent button from submitting forms
Co-authored-by: Daniel Alarcon Amador <daniel.amador@ing.com>
This commit is contained in:
parent
f9824ae44d
commit
0f2dfc63d2
3 changed files with 20 additions and 1 deletions
|
|
@ -46,6 +46,7 @@
|
||||||
"@lion/button": "^0.1.14",
|
"@lion/button": "^0.1.14",
|
||||||
"@open-wc/demoing-storybook": "^0.2.0",
|
"@open-wc/demoing-storybook": "^0.2.0",
|
||||||
"@open-wc/testing": "^0.11.1",
|
"@open-wc/testing": "^0.11.1",
|
||||||
"@polymer/iron-test-helpers": "^3.0.1"
|
"@polymer/iron-test-helpers": "^3.0.1",
|
||||||
|
"sinon": "^7.2.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -274,6 +274,7 @@ export class LionInputDatepicker extends LionInputDate {
|
||||||
// (a.k.a. dropdowns) as well. Important: will be breaking for subclassers
|
// (a.k.a. dropdowns) as well. Important: will be breaking for subclassers
|
||||||
return html`
|
return html`
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
@click="${this.__openCalendarOverlay}"
|
@click="${this.__openCalendarOverlay}"
|
||||||
id="${this.__invokerId}"
|
id="${this.__invokerId}"
|
||||||
aria-haspopup="dialog"
|
aria-haspopup="dialog"
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import { expect, fixture, aTimeout, defineCE } from '@open-wc/testing';
|
import { expect, fixture, aTimeout, defineCE } from '@open-wc/testing';
|
||||||
|
import sinon from 'sinon';
|
||||||
import { localizeTearDown } from '@lion/localize/test-helpers.js';
|
import { localizeTearDown } from '@lion/localize/test-helpers.js';
|
||||||
import { html, LitElement } from '@lion/core';
|
import { html, LitElement } from '@lion/core';
|
||||||
import {
|
import {
|
||||||
|
|
@ -422,4 +423,20 @@ describe('<lion-input-datepicker>', () => {
|
||||||
it.skip('can configure the overlay presentation based on media query switch', async () => {});
|
it.skip('can configure the overlay presentation based on media query switch', async () => {});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('regression tests', async () => {
|
||||||
|
it('does not submit a form when datepicker is opened', async () => {
|
||||||
|
const submitSpy = sinon.spy();
|
||||||
|
const form = await fixture(html`
|
||||||
|
<form @submit="${submitSpy}">
|
||||||
|
<lion-input-datepicker></lion-input-datepicker>
|
||||||
|
</form>
|
||||||
|
`);
|
||||||
|
const el = form.children[0];
|
||||||
|
await el.updateComplete;
|
||||||
|
const elObj = new DatepickerInputObject(el);
|
||||||
|
await elObj.openCalendar();
|
||||||
|
expect(submitSpy.callCount).to.equal(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue