fix(input-datepicker): prevent button from submitting forms

Co-authored-by: Daniel Alarcon Amador <daniel.amador@ing.com>
This commit is contained in:
Mikhail Bashkirov 2019-05-22 16:27:15 +02:00
parent f9824ae44d
commit 0f2dfc63d2
3 changed files with 20 additions and 1 deletions

View file

@ -46,6 +46,7 @@
"@lion/button": "^0.1.14",
"@open-wc/demoing-storybook": "^0.2.0",
"@open-wc/testing": "^0.11.1",
"@polymer/iron-test-helpers": "^3.0.1"
"@polymer/iron-test-helpers": "^3.0.1",
"sinon": "^7.2.2"
}
}

View file

@ -274,6 +274,7 @@ export class LionInputDatepicker extends LionInputDate {
// (a.k.a. dropdowns) as well. Important: will be breaking for subclassers
return html`
<button
type="button"
@click="${this.__openCalendarOverlay}"
id="${this.__invokerId}"
aria-haspopup="dialog"

View file

@ -1,4 +1,5 @@
import { expect, fixture, aTimeout, defineCE } from '@open-wc/testing';
import sinon from 'sinon';
import { localizeTearDown } from '@lion/localize/test-helpers.js';
import { html, LitElement } from '@lion/core';
import {
@ -422,4 +423,20 @@ describe('<lion-input-datepicker>', () => {
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);
});
});
});