Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(datepicker): refine focus state checks
This adds additional condition to restrict focus in/out to instance of the datepicker by verifyng if focus event target and related targets are descendants of the datepicker element. This removes false results based only on the class name checks, which fail when focus is switched between datepicker instances. Closes #3494
- Loading branch information
1 parent
5372506
commit 27da357
Showing
8 changed files
with
59 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
e2e-app/src/app/datepicker/multiple/datepicker-multiple.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<h3>Datepicker focus tests</h3> | ||
|
||
<form> | ||
<div> | ||
<ngb-datepicker name="dp1" placeholder="yyyy-mm-dd" #d1 [startDate]="startDate"></ngb-datepicker> | ||
<ngb-datepicker name="dp2" placeholder="yyyy-mm-dd" #d2 [startDate]="startDate"></ngb-datepicker> | ||
|
||
<span class="ml-3">startDate is | ||
<span id="start-date">{{ startDate | json }}</span> | ||
</span> | ||
|
||
</div> | ||
|
||
</form> |
6 changes: 6 additions & 0 deletions
6
e2e-app/src/app/datepicker/multiple/datepicker-multiple.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import {Component} from '@angular/core'; | ||
|
||
@Component({templateUrl: './datepicker-multiple.component.html'}) | ||
export class DatepickerMultipleComponent { | ||
startDate = {year: 2016, month: 8}; | ||
} |
20 changes: 20 additions & 0 deletions
20
e2e-app/src/app/datepicker/multiple/datepicker-multiple.e2e-spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import {Key} from 'protractor'; | ||
import {sendKey, openUrl} from '../../tools.po'; | ||
import {DatepickerMultiplePage} from './datepicker-multiple.po'; | ||
|
||
describe('Datepicker', () => { | ||
let page: DatepickerMultiplePage; | ||
|
||
beforeAll(() => page = new DatepickerMultiplePage()); | ||
|
||
beforeEach(async() => await openUrl('datepicker/multiple')); | ||
|
||
it('should lose focus on tapping on a different datepicker instance', async() => { | ||
await page.getDayElement(new Date(2016, 7, 1), 0).click(); | ||
await sendKey(Key.ARROW_DOWN); | ||
await page.expectActive(new Date(2016, 7, 8), 0); | ||
await page.getDayElement(new Date(2016, 7, 1), 1).click(); | ||
await sendKey(Key.ARROW_DOWN); | ||
await page.expectActive(new Date(2016, 7, 8), 1); | ||
}); | ||
}); |
8 changes: 8 additions & 0 deletions
8
e2e-app/src/app/datepicker/multiple/datepicker-multiple.po.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import {DatepickerPage} from './../datepicker.po'; | ||
|
||
export class DatepickerMultiplePage extends DatepickerPage { | ||
async expectActive(date: Date, index: number) { | ||
const dateElement = this.getDayElement(date, index); | ||
expect(await dateElement.$('.active').isPresent()).toBeTruthy(`The date should be active`); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters