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

Merge pull request #475 from ing-bank/fix/focus-selected-date

Browse source 
fix(datepicker): focus on selected date on opening
This commit is contained in:
Thijs Louisse 2020-01-08 11:01:59 +01:00 committed by GitHub
commit 607f3262c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -287,9 +287,13 @@ export class LionInputDatepicker extends OverlayMixin(LionInputDate) {
*/
_onCalendarOverlayOpened() {
if (this._focusCentralDateOnCalendarOpen) {
if (this._calendarElement.selectedDate) {
this._calendarElement.focusSelectedDate();
} else {
this._calendarElement.focusCentralDate();
}
}
}
_onCalendarUserSelectedChanged({ target: { selectedDate } }) {
if (this._hideOnUserSelect) {

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

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