fix(module: drawer, modal): fix focus bug of IE

close NG-ZORRO#2388
hsuanxyz · Dec 5, 2018 · 443b0f8 · 443b0f8
1 parent ef10595
commit 443b0f8
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/components/drawer/nz-drawer.component.ts b/components/drawer/nz-drawer.component.ts
@@ -286,6 +286,10 @@ export class NzDrawerComponent<T = any, R = any, D = any> extends NzDrawerRef<R>
     if (this.document) {
       this.previouslyFocusedElement = this.document.activeElement as HTMLElement;
       this.previouslyFocusedElement.blur();
+
+      if (typeof this.elementRef.nativeElement.focus === 'function') {
+        Promise.resolve().then(() => this.elementRef.nativeElement.focus());
+      }
     }
   }
 
@@ -297,7 +301,8 @@ export class NzDrawerComponent<T = any, R = any, D = any> extends NzDrawerRef<R>
   }
 
   private restoreFocus(): void {
-    if (this.previouslyFocusedElement) {
+    // We need the extra check, because IE can set the `activeElement` to null in some cases.
+    if (this.previouslyFocusedElement && typeof this.previouslyFocusedElement.focus === 'function') {
       this.previouslyFocusedElement.focus();
     }
     if (this.focusTrap) {

diff --git a/components/drawer/nz-drawer.service.ts b/components/drawer/nz-drawer.service.ts
@@ -15,6 +15,7 @@ export class DrawerBuilderForService<R> {
   constructor(private overlay: Overlay, private options: NzDrawerOptions) {
     this.createDrawer();
     this.updateOptions(options);
+    this.drawerRef.instance.savePreviouslyFocusedElement();
     this.drawerRef.instance.nzOnViewInit
     .pipe(takeUntil(this.unsubscribe$))
     .subscribe(() => {

diff --git a/components/modal/nz-modal.component.ts b/components/modal/nz-modal.component.ts
@@ -467,6 +467,10 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
       this.previouslyFocusedElement = this.document.activeElement as HTMLElement;
       this.previouslyFocusedElement.blur();
     }
+
+    if (typeof this.elementRef.nativeElement.focus === 'function') {
+      Promise.resolve().then(() => this.elementRef.nativeElement.focus());
+    }
   }
 
   private trapFocus(): void {
@@ -477,7 +481,7 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
   }
 
   private restoreFocus(): void {
-    if (this.previouslyFocusedElement) {
+    if (this.previouslyFocusedElement && typeof this.previouslyFocusedElement.focus === 'function') {
       this.previouslyFocusedElement.focus();
     }
     if (this.focusTrap) {