fix: dropdown and autocomplete animations (#6143)

close #6018
NG-ZORRO · Mar 22, 2021 · 70da5a2 · 70da5a2
1 parent ddc7ded
commit 70da5a2
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 8 deletions.
diff --git a/components/auto-complete/autocomplete-trigger.directive.ts b/components/auto-complete/autocomplete-trigger.directive.ts
@@ -14,7 +14,18 @@ import {
 } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { DOCUMENT } from '@angular/common';
-import { Directive, ElementRef, ExistingProvider, forwardRef, Inject, Input, OnDestroy, Optional, ViewContainerRef } from '@angular/core';
+import {
+  AfterViewInit,
+  Directive,
+  ElementRef,
+  ExistingProvider,
+  forwardRef,
+  Inject,
+  Input,
+  OnDestroy,
+  Optional,
+  ViewContainerRef
+} from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NzSafeAny, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
 import { NzInputGroupWhitSuffixOrPrefixDirective } from 'ng-zorro-antd/input';
@@ -52,7 +63,7 @@ export function getNzAutocompleteMissingPanelError(): Error {
     '(keydown)': 'handleKeydown($event)'
   }
 })
-export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnDestroy {
+export class NzAutocompleteTriggerDirective implements AfterViewInit, ControlValueAccessor, OnDestroy {
   /** Bind nzAutocomplete component */
   @Input() nzAutocomplete!: NzAutocompleteComponent;
 
@@ -84,6 +95,19 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
     @Optional() @Inject(DOCUMENT) private document: NzSafeAny
   ) {}
 
+  ngAfterViewInit(): void {
+    if (this.nzAutocomplete) {
+      this.nzAutocomplete.animationStateChange.pipe(takeUntil(this.destroy$)).subscribe(event => {
+        if (event.toState === 'void') {
+          if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+          }
+        }
+      });
+    }
+  }
+
   ngOnDestroy(): void {
     this.destroyPanel();
   }
@@ -117,11 +141,10 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
       this.nzAutocomplete.isOpen = this.panelOpen = false;
 
       if (this.overlayRef && this.overlayRef.hasAttached()) {
+        this.overlayRef.detach();
         this.selectionChangeSubscription.unsubscribe();
         this.overlayOutsideClickSubscription.unsubscribe();
         this.optionsChangeSubscription.unsubscribe();
-        this.overlayRef.dispose();
-        this.overlayRef = null;
         this.portal = null;
       }
     }

diff --git a/components/auto-complete/autocomplete.component.ts b/components/auto-complete/autocomplete.component.ts
@@ -3,6 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { AnimationEvent } from '@angular/animations';
 import {
   AfterContentInit,
   AfterViewInit,
@@ -58,7 +59,8 @@ export type AutocompleteDataSource = Array<AutocompleteDataSourceItem | string |
         [ngClass]="nzOverlayClassName"
         [ngStyle]="nzOverlayStyle"
         [nzNoAnimation]="noAnimation?.nzNoAnimation"
-        [@slideMotion]="'enter'"
+        @slideMotion
+        (@slideMotion.done)="onAnimationEvent($event)"
         [@.disabled]="noAnimation?.nzNoAnimation"
       >
         <div style="max-height: 256px; overflow-y: auto; overflow-anchor: none;">
@@ -102,6 +104,7 @@ export class NzAutocompleteComponent implements AfterContentInit, AfterViewInit,
   activeItem!: NzAutocompleteOptionComponent;
   dir: Direction = 'ltr';
   private destroy$ = new Subject<void>();
+  animationStateChange = new EventEmitter<AnimationEvent>();
 
   /**
    * Options accessor, its source may be content or dataSource
@@ -165,6 +168,10 @@ export class NzAutocompleteComponent implements AfterContentInit, AfterViewInit,
     this.dir = this.directionality.value;
   }
 
+  onAnimationEvent(event: AnimationEvent): void {
+    this.animationStateChange.emit(event);
+  }
+
   ngAfterContentInit(): void {
     if (!this.nzDataSource) {
       this.optionsInit();

diff --git a/components/auto-complete/autocomplete.spec.ts b/components/auto-complete/autocomplete.spec.ts
@@ -302,6 +302,7 @@ describe('auto-complete', () => {
 
       componentInstance.trigger.handleKeydown(TAB_EVENT);
       fixture.detectChanges();
+      flush();
 
       expect(input.value).not.toBe('Burns Bay Road');
 

diff --git a/components/dropdown/dropdown-menu.component.ts b/components/dropdown/dropdown-menu.component.ts
@@ -3,13 +3,15 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { AnimationEvent } from '@angular/animations';
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ElementRef,
+  EventEmitter,
   Host,
   OnDestroy,
   OnInit,
@@ -48,7 +50,8 @@ export type NzPlacementType = 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 't
         [class.ant-dropdown-rtl]="dir === 'rtl'"
         [ngClass]="nzOverlayClassName"
         [ngStyle]="nzOverlayStyle"
-        [@slideMotion]="'enter'"
+        @slideMotion
+        (@slideMotion.done)="onAnimationEvent($event)"
         [@.disabled]="noAnimation?.nzNoAnimation"
         [nzNoAnimation]="noAnimation?.nzNoAnimation"
         (mouseenter)="setMouseState(true)"
@@ -66,13 +69,18 @@ export class NzDropdownMenuComponent implements AfterContentInit, OnDestroy, OnI
   mouseState$ = new BehaviorSubject<boolean>(false);
   isChildSubMenuOpen$ = this.nzMenuService.isChildSubMenuOpen$;
   descendantMenuItemClick$ = this.nzMenuService.descendantMenuItemClick$;
+  animationStateChange$ = new EventEmitter<AnimationEvent>();
   nzOverlayClassName: string = '';
   nzOverlayStyle: IndexableObject = {};
   @ViewChild(TemplateRef, { static: true }) templateRef!: TemplateRef<NzSafeAny>;
 
   dir: Direction = 'ltr';
   private destroy$ = new Subject<void>();
 
+  onAnimationEvent(event: AnimationEvent): void {
+    this.animationStateChange$.emit(event);
+  }
+
   setMouseState(visible: boolean): void {
     this.mouseState$.next(visible);
   }

diff --git a/components/dropdown/dropdown.directive.ts b/components/dropdown/dropdown.directive.ts
@@ -155,8 +155,10 @@ export class NzDropDownDirective implements AfterViewInit, OnDestroy, OnChanges,
                 this.overlayRef.outsidePointerEvents().pipe(filter((e: MouseEvent) => !this.elementRef.nativeElement.contains(e.target))),
                 this.overlayRef.keydownEvents().pipe(filter(e => e.keyCode === ESCAPE && !hasModifierKey(e)))
               )
-                .pipe(mapTo(false), takeUntil(this.destroy$))
-                .subscribe(this.overlayClose$);
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                  this.overlayClose$.next(false);
+                });
             } else {
               /** update overlay config **/
               const overlayConfig = this.overlayRef.getConfig();
@@ -176,6 +178,15 @@ export class NzDropDownDirective implements AfterViewInit, OnDestroy, OnChanges,
             }
           }
         });
+
+      this.nzDropdownMenu!.animationStateChange$.pipe(takeUntil(this.destroy$)).subscribe(event => {
+        if (event.toState === 'void') {
+          if (this.overlayRef) {
+            this.overlayRef.dispose();
+          }
+          this.overlayRef = null;
+        }
+      });
     }
   }