ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(datepicker): focus on selected date on opening

Browse source
This commit is contained in:
qa46hx 2020-01-06 15:44:40 +01:00
parent d66a90566c
commit d29d9db754
3 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/input-datepicker/src/LionInputDatepicker.js
View file

@ -287,7 +287,11 @@ export class LionInputDatepicker extends OverlayMixin(LionInputDate) {
*/ */
_onCalendarOverlayOpened() { _onCalendarOverlayOpened() {
if (this._focusCentralDateOnCalendarOpen) { if (this._focusCentralDateOnCalendarOpen) {
this._calendarElement.focusCentralDate(); if (this._calendarElement.selectedDate) {
this._calendarElement.focusSelectedDate();
} else {
this._calendarElement.focusCentralDate();
}
} }
} }

3
packages/input-datepicker/stories/index.stories.js
View file

@ -7,8 +7,7 @@ storiesOf('Forms|Input Datepicker', module)
.add( .add(
'Default', 'Default',
() => html` () => html`
<lion-input-datepicker label="Date" .modelValue=${new Date('2017/06/15')}> <lion-input-datepicker label="Date"> </lion-input-datepicker>
</lion-input-datepicker>
`, `,
) )
.add( .add(

14
packages/input-datepicker/test/lion-input-datepicker.test.js
View file

@ -188,13 +188,23 @@ describe('<lion-input-datepicker>', () => {
expect(elObj.overlayController.isShown).to.equal(false); expect(elObj.overlayController.isShown).to.equal(false);
}); });
it('focuses interactable date on opening of calendar', async () => { it('focuses selected date on opening of calendar', async () => {
const el = await fixture(html`
<lion-input-datepicker .modelValue="${new Date()}"></lion-input-datepicker>
`);
const elObj = new DatepickerInputObject(el);
await elObj.openCalendar();
await aTimeout();
expect(isSameDate(elObj.calendarEl.focusedDate, elObj.calendarEl.selectedDate)).to.be.true;
});
it('focuses central date on opening of calendar if no date selected', async () => {
const el = await fixture(html` const el = await fixture(html`
<lion-input-datepicker></lion-input-datepicker> <lion-input-datepicker></lion-input-datepicker>
`); `);
const elObj = new DatepickerInputObject(el); const elObj = new DatepickerInputObject(el);
await elObj.openCalendar(); await elObj.openCalendar();
expect(elObj.calendarObj.focusedDayObj.el).not.to.equal(null); expect(isSameDate(elObj.calendarEl.focusedDate, elObj.calendarEl.centralDate)).to.be.true;
}); });
describe('Validators', () => { describe('Validators', () => {