From 21057b8d518142ea496285e95938d55c3dff2b17 Mon Sep 17 00:00:00 2001 From: Tacho Date: Mon, 3 Dec 2018 16:26:06 +0200 Subject: [PATCH 1/5] test(dialog): add test for focused dialog when opened #3199 --- .../src/lib/dialog/dialog.component.spec.ts | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts index d559dadfd8a..57b4c37054b 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts @@ -297,6 +297,29 @@ describe('Dialog', () => { expect(overlayWrapper.classList.contains(OVERLAY_WRAPPER_CLASS)).toBe(false); })); + it('The dialog is focused after opening it and can be closed with keyboard.', fakeAsync(() => { + const fix = TestBed.createComponent(CustomTemplates1DialogComponent); + fix.detectChanges(); + + const dialog: IgxDialogComponent = fix.componentInstance.dialog as IgxDialogComponent; + dialog.open(); + tick(); + fix.detectChanges(); + + // Verify dialog is opened and focused + expect(document.activeElement).toBe(dialog.toggleRef.element); + expect(dialog.isOpen).toEqual(true); + + // Press 'escape' key + UIInteractions.simulateKeyDownEvent(document.activeElement, 'Escape'); + tick(); + fix.detectChanges(); + + // Verify dialog is closed and no longer focused + expect(document.activeElement).not.toBe(dialog.toggleRef.element); + expect(dialog.isOpen).toEqual(false); + })); + function dispatchEvent(element: HTMLElement, eventType: string) { const event = new Event(eventType); element.dispatchEvent(event); From c6788f2dea524a1c73ea4160061be11720a2a274 Mon Sep 17 00:00:00 2001 From: Tacho Date: Mon, 3 Dec 2018 16:55:54 +0200 Subject: [PATCH 2/5] fix(dialog): focus dialog on open #3199 --- projects/igniteui-angular/src/lib/dialog/dialog.component.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts index 60c94a7abbf..ea37fd622f6 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts @@ -372,6 +372,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After } ngAfterContentInit() { + this.onOpen.pipe(takeUntil(this.destroy$)).subscribe(() => this.focusDialog()); this.toggleRef.onClosing.pipe(takeUntil(this.destroy$)).subscribe(() => this.emitCloseFromDialog()); } @@ -379,6 +380,10 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After this.onClose.emit({ dialog: this, event: null }); } + private focusDialog() { + this.toggleRef.element.focus(); + } + /** * A method that opens the dialog. * @memberOf {@link IgxDialogComponent} From 1db99eceb9cc918c6696cd17269723bf3a56d30e Mon Sep 17 00:00:00 2001 From: Tacho Date: Thu, 6 Dec 2018 11:33:20 +0200 Subject: [PATCH 3/5] Merge branch 'tzhelev/fix-3199-6.2.x' of https://github.com/IgniteUI/igniteui-angular into tzhelev/fix-3199-6.2.x --- .../lib/dialog/dialog-content.component.html | 4 ++-- .../src/lib/dialog/dialog.component.spec.ts | 20 ++++++++++--------- .../src/lib/dialog/dialog.component.ts | 10 +++------- 3 files changed, 16 insertions(+), 18 deletions(-) diff --git a/projects/igniteui-angular/src/lib/dialog/dialog-content.component.html b/projects/igniteui-angular/src/lib/dialog/dialog-content.component.html index 1761d74f061..bdb86329245 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog-content.component.html +++ b/projects/igniteui-angular/src/lib/dialog/dialog-content.component.html @@ -10,11 +10,11 @@
- - diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts index 57b4c37054b..3c7fd688940 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts @@ -2,7 +2,7 @@ import { Component, DebugElement, ElementRef, ViewChild } from '@angular/core'; import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { UIInteractions } from '../test-utils/ui-interactions.spec'; +import { UIInteractions, wait } from '../test-utils/ui-interactions.spec'; import { IDialogEventArgs, IgxDialogComponent, IgxDialogModule } from './dialog.component'; import { configureTestSuite } from '../test-utils/configure-suite'; @@ -297,26 +297,28 @@ describe('Dialog', () => { expect(overlayWrapper.classList.contains(OVERLAY_WRAPPER_CLASS)).toBe(false); })); - it('The dialog is focused after opening it and can be closed with keyboard.', fakeAsync(() => { - const fix = TestBed.createComponent(CustomTemplates1DialogComponent); + it('Default button of the dialog is focused after opening the dialog and can be closed with keyboard.', (async() => { + const fix = TestBed.createComponent(DialogComponent); fix.detectChanges(); const dialog: IgxDialogComponent = fix.componentInstance.dialog as IgxDialogComponent; dialog.open(); - tick(); fix.detectChanges(); + await wait(16); - // Verify dialog is opened and focused - expect(document.activeElement).toBe(dialog.toggleRef.element); + // Verify dialog is opened and its default right button is focused + const dialogDOM = fix.debugElement.query(By.css('.igx-dialog')); + const rightButton = dialogDOM.queryAll(By.css('button')).filter((b) => b.nativeElement.innerText === 'right button')[0]; + expect(document.activeElement).toBe(rightButton.nativeElement); expect(dialog.isOpen).toEqual(true); // Press 'escape' key UIInteractions.simulateKeyDownEvent(document.activeElement, 'Escape'); - tick(); fix.detectChanges(); + await wait(16); - // Verify dialog is closed and no longer focused - expect(document.activeElement).not.toBe(dialog.toggleRef.element); + // Verify dialog is closed and its default right button is no longer focused + expect(document.activeElement).not.toBe(rightButton.nativeElement); expect(dialog.isOpen).toEqual(false); })); diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts index ea37fd622f6..cf62d6cd43e 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts @@ -25,6 +25,7 @@ import { IgxDialogActionsDirective, IgxDialogTitleDirective } from './dialog.dir import { IgxToggleModule, IgxToggleDirective } from '../directives/toggle/toggle.directive'; import { OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, PositionSettings } from '../services'; import { slideInBottom, slideOutTop } from '../animations/slide/index'; +import { IgxFocusModule } from '../directives/focus/focus.directive'; let DIALOG_ID = 0; /** @@ -371,8 +372,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After }; } - ngAfterContentInit() { - this.onOpen.pipe(takeUntil(this.destroy$)).subscribe(() => this.focusDialog()); + ngAfterContentInit() { this.toggleRef.onClosing.pipe(takeUntil(this.destroy$)).subscribe(() => this.emitCloseFromDialog()); } @@ -380,10 +380,6 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After this.onClose.emit({ dialog: this, event: null }); } - private focusDialog() { - this.toggleRef.element.focus(); - } - /** * A method that opens the dialog. * @memberOf {@link IgxDialogComponent} @@ -490,6 +486,6 @@ export interface IDialogEventArgs { @NgModule({ declarations: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective], exports: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective], - imports: [CommonModule, IgxToggleModule, IgxButtonModule, IgxRippleModule] + imports: [CommonModule, IgxToggleModule, IgxButtonModule, IgxRippleModule, IgxFocusModule] }) export class IgxDialogModule { } From ec14378d08d7b359a87bcf6c51803832e4c42abb Mon Sep 17 00:00:00 2001 From: Tacho Date: Thu, 6 Dec 2018 12:57:40 +0200 Subject: [PATCH 4/5] chore(dialog): make lint happy #3199 --- projects/igniteui-angular/src/lib/dialog/dialog.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts index cf62d6cd43e..c4fa941ca64 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts @@ -372,7 +372,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After }; } - ngAfterContentInit() { + ngAfterContentInit() { this.toggleRef.onClosing.pipe(takeUntil(this.destroy$)).subscribe(() => this.emitCloseFromDialog()); } From 59b7dc50661159dc5546bbec3dbb238497d9c923 Mon Sep 17 00:00:00 2001 From: Tacho Date: Thu, 6 Dec 2018 14:05:16 +0200 Subject: [PATCH 5/5] fix(focus): import focus module in focus spec #3199 --- .../src/lib/directives/focus/focus.directive.spec.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/focus/focus.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/focus/focus.directive.spec.ts index 06b993d3087..a852984cacb 100644 --- a/projects/igniteui-angular/src/lib/directives/focus/focus.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/focus/focus.directive.spec.ts @@ -6,7 +6,7 @@ import { tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { IgxFocusDirective } from './focus.directive'; +import { IgxFocusDirective, IgxFocusModule } from './focus.directive'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { EditorProvider } from '../../core/edit-provider'; @@ -19,13 +19,12 @@ describe('igxFocus', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ - IgxFocusDirective, SetFocusComponent, NoFocusComponent, TriggerFocusOnClickComponent, CheckboxPickerComponent ], - imports: [ IgxCheckboxModule, IgxDatePickerModule, NoopAnimationsModule ] + imports: [ IgxFocusModule, IgxCheckboxModule, IgxDatePickerModule, NoopAnimationsModule ] }).compileComponents(); }));