fix(module:typography): not render when the edit text has no changes

components/core/trans-button/nz-trans-button.module.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { NzTransButtonDirective } from './nz-trans-button.directive';
+
+@NgModule({
+  declarations: [NzTransButtonDirective],
+  exports: [NzTransButtonDirective],
+  imports: [CommonModule]
+})
+export class NzTransButtonModule {}

components/core/trans-button/public-api.ts

@@ -6,4 +6,5 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+export { NzTransButtonModule } from './nz-trans-button.module';
 export { NzTransButtonDirective } from './nz-trans-button.directive';

components/input/nz-autosize.directive.ts

@@ -144,7 +144,7 @@ export class NzAutosizeDirective implements AfterViewInit, OnDestroy, DoCheck {
     textareaClone.style.overflow = 'hidden';
 
     this.el.parentNode!.appendChild(textareaClone);
-    this.cachedLineHeight = textareaClone.clientHeight;
+    this.cachedLineHeight = textareaClone.clientHeight - this.inputGap - 1;
     this.el.parentNode!.removeChild(textareaClone);
 
     // Min and max heights have to be re-calculated if the cached line height changes

components/ng-zorro-antd.module.ts

@@ -16,7 +16,7 @@ import { NzCascaderModule } from 'ng-zorro-antd/cascader';
 import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 import { NzCollapseModule } from 'ng-zorro-antd/collapse';
 import { NzCommentModule } from 'ng-zorro-antd/comment';
-import { warnDeprecation, NzNoAnimationModule, NzWaveModule } from 'ng-zorro-antd/core';
+import { warnDeprecation, NzNoAnimationModule, NzWaveModule, NzTransButtonModule } from 'ng-zorro-antd/core';
 import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
@@ -160,6 +160,7 @@ export * from './version';
     NzCardModule,
     NzAvatarModule,
     NzTimelineModule,
+    NzTransButtonModule,
     NzTransferModule,
     NzCarouselModule,
     NzCollapseModule,

components/typography/nz-typography.component.ts

@@ -125,7 +125,9 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
   onEndEditing(text: string): void {
     this.editing = false;
     this.nzContentChange.emit(text);
-    this.resizeOnNextFrameIfNeed();
+    if (this.nzContent === text) {
+      this.renderOnNextFrame();
+    }
   }
 
   onExpand(): void {
@@ -144,7 +146,7 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
     }
   }
 
-  resizeOnNextFrameIfNeed(): void {
+  renderOnNextFrame(): void {
     cancelRequestAnimationFrame(this.rfaId);
     if (!this.viewInit || !this.nzEllipsis || this.nzEllipsisRows < 0 || this.expanded || !this.platform.isBrowser) {
       return;
@@ -186,32 +188,30 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
 
     removeView();
 
-    if (this.ellipsisText !== text || this.isEllipsis !== ellipsis) {
-      this.ellipsisText = text;
-      this.isEllipsis = ellipsis;
-      const ellipsisContainerNativeElement = this.ellipsisContainer.nativeElement;
-      while (ellipsisContainerNativeElement.firstChild) {
-        this.renderer.removeChild(ellipsisContainerNativeElement, ellipsisContainerNativeElement.firstChild);
-      }
-      contentNodes.forEach(n => {
-        this.renderer.appendChild(ellipsisContainerNativeElement, n.cloneNode(true));
-      });
-      this.cdr.markForCheck();
+    this.ellipsisText = text;
+    this.isEllipsis = ellipsis;
+    const ellipsisContainerNativeElement = this.ellipsisContainer.nativeElement;
+    while (ellipsisContainerNativeElement.firstChild) {
+      this.renderer.removeChild(ellipsisContainerNativeElement, ellipsisContainerNativeElement.firstChild);
     }
+    contentNodes.forEach(n => {
+      this.renderer.appendChild(ellipsisContainerNativeElement, n.cloneNode(true));
+    });
+    this.cdr.markForCheck();
   }
 
-  private resizeAndSubscribeWindowResize(): void {
+  private renderAndSubscribeWindowResize(): void {
     if (this.platform.isBrowser) {
       this.windowResizeSubscription.unsubscribe();
       this.cssEllipsis = this.canUseCSSEllipsis();
-      this.resizeOnNextFrameIfNeed();
+      this.renderOnNextFrame();
       this.ngZone.runOutsideAngular(() => {
         this.windowResizeSubscription = fromEvent(window, 'resize')
           .pipe(
             auditTime(16),
             takeUntil(this.destroy$)
           )
-          .subscribe(() => this.resizeOnNextFrameIfNeed());
+          .subscribe(() => this.renderOnNextFrame());
       });
     }
   }
@@ -225,7 +225,7 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
 
   ngAfterViewInit(): void {
     this.viewInit = true;
-    this.resizeAndSubscribeWindowResize();
+    this.renderAndSubscribeWindowResize();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -235,7 +235,7 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
         if (this.expanded) {
           this.windowResizeSubscription.unsubscribe();
         } else {
-          this.resizeAndSubscribeWindowResize();
+          this.renderAndSubscribeWindowResize();
         }
       }
     }

components/typography/nz-typography.module.ts

@@ -9,7 +9,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { NzTransButtonDirective } from 'ng-zorro-antd/core';
+import { NzTransButtonModule } from 'ng-zorro-antd/core';
 import { NzI18nModule } from 'ng-zorro-antd/i18n';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzInputModule } from 'ng-zorro-antd/input';
@@ -20,8 +20,8 @@ import { NzTextEditComponent } from './nz-text-edit.component';
 import { NzTypographyComponent } from './nz-typography.component';
 
 @NgModule({
-  imports: [CommonModule, NzIconModule, NzToolTipModule, NzInputModule, NzI18nModule],
-  exports: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent, NzTransButtonDirective],
-  declarations: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent, NzTransButtonDirective]
+  imports: [CommonModule, NzIconModule, NzToolTipModule, NzInputModule, NzI18nModule, NzTransButtonModule],
+  exports: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent],
+  declarations: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent]
 })
 export class NzTypographyModule {}