fix(abc:notice-icon): fix nz-tabset animation triggers panel height

- close #1804
ng-alain · Jul 1, 2024 · a46ce08 · a46ce08
1 parent b9b36d6
commit a46ce08
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/packages/abc/notice-icon/notice-icon.component.html b/packages/abc/notice-icon/notice-icon.component.html
@@ -19,13 +19,15 @@
   </div>
   <nz-dropdown-menu #noticeMenu="nzDropdownMenu">
     <nz-spin [nzSpinning]="loading" [nzDelay]="0">
-      <nz-tabset [nzSelectedIndex]="0" [nzCentered]="centered">
-        @for (i of data; track $index) {
-          <nz-tab [nzTitle]="i.title">
-            <notice-icon-tab [locale]="locale" [data]="i" (select)="onSelect($event)" (clear)="onClear($event)" />
-          </nz-tab>
-        }
-      </nz-tabset>
+      @if (delayShow) {
+        <nz-tabset [nzSelectedIndex]="0" [nzCentered]="centered">
+          @for (i of data; track $index) {
+            <nz-tab [nzTitle]="i.title">
+              <notice-icon-tab [locale]="locale" [data]="i" (select)="onSelect($event)" (clear)="onClear($event)" />
+            </nz-tab>
+          }
+        </nz-tabset>
+      }
     </nz-spin>
   </nz-dropdown-menu>
 }
diff --git a/packages/abc/notice-icon/notice-icon.component.ts b/packages/abc/notice-icon/notice-icon.component.ts
@@ -70,8 +70,14 @@ export class NoticeIconComponent implements OnInit, OnChanges, OnDestroy {
     return `header-dropdown notice-icon${!this.centered ? ' notice-icon__tab-left' : ''}`;
   }
 
+  delayShow = false;
   onVisibleChange(result: boolean): void {
+    this.delayShow = result;
     this.popoverVisibleChange.emit(result);
+    if (result) {
+      // Next tick run
+      Promise.resolve().then(() => this.cdr.detectChanges());
+    }
   }
 
   onSelect(i: NoticeIconSelect): void {

diff --git a/packages/abc/notice-icon/notice-icon.spec.ts b/packages/abc/notice-icon/notice-icon.spec.ts
@@ -68,7 +68,7 @@ describe('abc: notice-icon', () => {
     });
     it('should be control loading in visible popover', done => {
       context.loading = true;
-      context.popoverVisible = true;
+      context.comp.onVisibleChange(true);
       fixture.detectChanges();
       setTimeout(() => {
         const el = document.querySelector('.ant-spin-container') as HTMLElement;
@@ -78,7 +78,7 @@ describe('abc: notice-icon', () => {
     });
     it('should be select item', done => {
       spyOn(context, 'select');
-      context.popoverVisible = true;
+      context.comp.onVisibleChange(true);
       fixture.detectChanges();
       setTimeout(() => {
         expect(context.select).not.toHaveBeenCalled();
@@ -90,7 +90,7 @@ describe('abc: notice-icon', () => {
     });
     it('should be clear', done => {
       spyOn(context, 'clear');
-      context.popoverVisible = true;
+      context.comp.onVisibleChange(true);
       fixture.detectChanges();
       setTimeout(() => {
         expect(context.clear).not.toHaveBeenCalled();
@@ -102,7 +102,7 @@ describe('abc: notice-icon', () => {
     });
     it('#centered', done => {
       context.centered = true;
-      context.popoverVisible = true;
+      context.comp.onVisibleChange(true);
       fixture.detectChanges();
       setTimeout(() => {
         expect(document.querySelectorAll('.notice-icon__tab-left').length).toBe(0);
@@ -112,7 +112,7 @@ describe('abc: notice-icon', () => {
   });
 
   it('#i18n', done => {
-    context.popoverVisible = true;
+    context.comp.onVisibleChange(true);
     context.data = [{ title: 'a1', list: [] }];
     fixture.detectChanges();
     setTimeout(() => {