Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(datepicker): restore focus after closing popup #3371

Merged
merged 1 commit into from Sep 26, 2019
Merged

fix(datepicker): restore focus after closing popup #3371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
36 changes: 22 additions & 14 deletions e2e-app/src/app/datepicker/focus/datepicker-focus.e2e-spec.ts
View file
Open in desktop
Expand Up @@ -59,34 +59,26 @@ describe('Datepicker', () => {
await expectFocused(page.getToggle(), `Toggle element should stay focused after datepicker is closed`);
});

it(`should be closed on Escape and focus nothing`, async() => {
it(`should be closed on Escape and re-focus toggle element`, async() => {
await page.openDatepicker();

// close
await sendKey(Key.ESCAPE);
expect(await page.getDatepicker().isPresent()).toBeFalsy(`Datepicker should not be present on the page`);

// check nothing is focused
await expectFocused($('body'), `Nothing should be focused after datepicker is closed`);

// tab should focus toggling element
await sendKey(Key.TAB);
await expectFocused(page.getToggle(), `Toggle element should become focused on Tab press`);
// check toggle is focused
await expectFocused(page.getToggle(), `Toggle element become re-focused after datepicker is closed`);
});

it(`should be closed on date selection and focus nothing`, async() => {
it(`should be closed on date selection and re-focus toggle element`, async() => {
await page.openDatepicker();

// close
await page.getToday().click();
expect(await page.getDatepicker().isPresent()).toBeFalsy(`Datepicker should not be present on the page`);

// check nothing is focused
await expectFocused($('body'), `Nothing should be focused after datepicker is closed`);

// tab should focus toggling element
await sendKey(Key.TAB);
await expectFocused(page.getToggle(), `Toggle element should become focused on Tab press`);
// check toggle is focused
await expectFocused(page.getToggle(), `Toggle element become re-focused after datepicker is closed`);
});

it(`should trap focus inside opened popup (Tab)`, async() => {
Expand Down Expand Up @@ -188,6 +180,22 @@ describe('Datepicker', () => {
await expectFocused(page.getPrevMonthArrow(), `Previous Month arrow should be focused`);
});

it(`should be closed on Escape from input and keep focus`, async() => {
await page.openDatepicker();
const datepickerInput = page.getDatepickerInput();

// focus input
await datepickerInput.click();
await expectFocused(datepickerInput, `Datepicker input should be focused`);

// close
await sendKey(Key.ESCAPE);
expect(await page.getDatepicker().isPresent()).toBeFalsy(`Datepicker should not be present on the page`);

// check input is still focused
await expectFocused(page.getDatepickerInput(), `Input element should stay focused after datepicker is closed`);
});

describe('Keyboard', () => {

it(`should handle focus correctly when months are changed with keyboard`, async() => {
Expand Down
9 changes: 9 additions & 0 deletions src/datepicker/datepicker-input.ts
View file
Open in desktop
Expand Up @@ -56,6 +56,7 @@ const NGB_DATEPICKER_VALIDATOR = {
host: {
'(input)': 'manualDateChange($event.target.value)',
'(change)': 'manualDateChange($event.target.value, true)',
'(focus)': 'onFocus()',
'(blur)': 'onBlur()',
'[disabled]': 'disabled'
},
Expand All @@ -65,6 +66,7 @@ export class NgbInputDatepicker implements OnChanges,
OnDestroy, ControlValueAccessor, Validator {
private _cRef: ComponentRef<NgbDatepicker> = null;
private _disabled = false;
private _elWithFocus = null;
private _model: NgbDate;
private _inputValue: string;
private _zoneSubscription: any;
Expand Down Expand Up @@ -345,6 +347,7 @@ export class NgbInputDatepicker implements OnChanges,
}

// focus handling
this._elWithFocus = this._document.activeElement;
ngbFocusTrap(this._cRef.location.nativeElement, this.closed, true);
this._cRef.instance.focus();

Expand All @@ -363,6 +366,10 @@ export class NgbInputDatepicker implements OnChanges,
this._cRef = null;
this.closed.emit();
this._changeDetector.markForCheck();

// restore focus
const elementToFocus = this._elWithFocus && this._elWithFocus['focus'] ? this._elWithFocus : this._document.body;
elementToFocus.focus();
}
}

Expand Down Expand Up @@ -393,6 +400,8 @@ export class NgbInputDatepicker implements OnChanges,

onBlur() { this._onTouched(); }

onFocus() { this._elWithFocus = this._elRef.nativeElement; }

ngOnChanges(changes: SimpleChanges) {
if (changes['minDate'] || changes['maxDate']) {
this._validatorChange();
Expand Down