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

* fix(module: drawer, modal): fix focus bug of IE * fix(module:drawer): prevent repeatedly open drawer when tap focus element close #2388
NG-ZORRO · Dec 11, 2018 · 0458604 · 0458604
1 parent 88be1c3
commit 0458604
Show file tree

Hide file tree

Showing 3 changed files with 10 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,8 @@ export class DrawerBuilderForService<R> {
   constructor(private overlay: Overlay, private options: NzDrawerOptions) {
     this.createDrawer();
     this.updateOptions(options);
+    // Prevent repeatedly open drawer when tap focus element.
+    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
@@ -477,7 +477,8 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
   }
 
   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) {