fix(dialog): dialog gets focus when is opened - 7.1.x

projects/igniteui-angular/src/lib/dialog/dialog-content.component.html

@@ -10,11 +10,11 @@
         <ng-content *ngIf="!message"></ng-content>
 
         <div *ngIf="leftButtonLabel || rightButtonLabel" class="igx-dialog__window-actions">
-            <button *ngIf="leftButtonLabel" type="button" igxButton="{{ leftButtonType }}" igxButtonColor="{{ leftButtonColor }}" igxButtonBackground="{{ leftButtonBackgroundColor }}"
+            <button *ngIf="leftButtonLabel" type="button" [igxFocus]="isOpen" igxButton="{{ leftButtonType }}" igxButtonColor="{{ leftButtonColor }}" igxButtonBackground="{{ leftButtonBackgroundColor }}"
                 igxRipple="{{ leftButtonRipple }}" (click)="onInternalLeftButtonSelect($event)">
                 {{ leftButtonLabel }}
             </button>
-            <button *ngIf="rightButtonLabel" type="button" igxButton="{{ rightButtonType }}" igxButtonColor="{{ rightButtonColor }}" igxButtonBackground="{{ rightButtonBackgroundColor }}"
+            <button *ngIf="rightButtonLabel" type="button" [igxFocus]="isOpen" igxButton="{{ rightButtonType }}" igxButtonColor="{{ rightButtonColor }}" igxButtonBackground="{{ rightButtonBackgroundColor }}"
                 igxRipple="{{ rightButtonRipple }}" (click)="onInternalRightButtonSelect($event)">
                 {{ rightButtonLabel }}
             </button>

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,6 +297,31 @@ describe('Dialog', () => {
         expect(overlayWrapper.classList.contains(OVERLAY_WRAPPER_CLASS)).toBe(false);
     }));
 
+    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();
+        fix.detectChanges();
+        await wait(16);
+
+        // 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');
+        fix.detectChanges();
+        await wait(16);
+
+        // 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);
+    }));
+
     function dispatchEvent(element: HTMLElement, eventType: string) {
         const event = new Event(eventType);
         element.dispatchEvent(event);

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;
 /**
@@ -485,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 { }

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();
     }));