fix(module:typography): edit area cannot get the content (#6369)

components/table/src/table/table-content.component.ts

@@ -30,6 +30,6 @@ export class NzTableContentComponent {
   @Input() tableLayout: NzTableLayout = 'auto';
   @Input() theadTemplate: TemplateRef<NzSafeAny> | null = null;
   @Input() contentTemplate: TemplateRef<NzSafeAny> | null = null;
-  @Input() listOfColWidth: Array<string | null> = [];
+  @Input() listOfColWidth: ReadonlyArray<string | null> = [];
   @Input() scrollX: string | null = null;
 }

components/table/src/table/table-inner-default.component.ts

@@ -25,7 +25,7 @@ import { NzTableLayout } from '../table.types';
 })
 export class NzTableInnerDefaultComponent {
   @Input() tableLayout: NzTableLayout = 'auto';
-  @Input() listOfColWidth: Array<string | null> = [];
+  @Input() listOfColWidth: ReadonlyArray<string | null> = [];
   @Input() theadTemplate: TemplateRef<NzSafeAny> | null = null;
   @Input() contentTemplate: TemplateRef<NzSafeAny> | null = null;
 

components/table/src/table/table-inner-scroll.component.ts

@@ -83,12 +83,12 @@ import { NzTableData } from '../table.types';
   `
 })
 export class NzTableInnerScrollComponent implements OnChanges, AfterViewInit, OnDestroy {
-  @Input() data: NzTableData[] = [];
+  @Input() data: ReadonlyArray<NzTableData> = [];
   @Input() scrollX: string | null = null;
   @Input() scrollY: string | null = null;
   @Input() contentTemplate: TemplateRef<NzSafeAny> | null = null;
   @Input() widthConfig: string[] = [];
-  @Input() listOfColWidth: Array<string | null> = [];
+  @Input() listOfColWidth: ReadonlyArray<string | null> = [];
   @Input() theadTemplate: TemplateRef<NzSafeAny> | null = null;
   @Input() virtualTemplate: TemplateRef<NzSafeAny> | null = null;
   @Input() virtualItemSize = 0;

components/table/src/table/tr-measure.component.ts

@@ -37,7 +37,7 @@ import { debounceTime, map, startWith, switchMap, takeUntil } from 'rxjs/operato
   `
 })
 export class NzTrMeasureComponent implements AfterViewInit, OnDestroy {
-  @Input() listOfMeasureColumn: string[] = [];
+  @Input() listOfMeasureColumn: ReadonlyArray<string> = [];
   @Output() readonly listOfAutoWidth = new EventEmitter<number[]>();
   @ViewChildren('tdElement') listOfTdElement!: QueryList<ElementRef>;
   private destroy$ = new Subject();

components/typography/text-edit.component.ts

@@ -10,6 +10,7 @@ import {
   ElementRef,
   EventEmitter,
   Input,
+  NgZone,
   OnDestroy,
   OnInit,
   Output,
@@ -22,7 +23,7 @@ import { NzI18nService, NzTextI18nInterface } from 'ng-zorro-antd/i18n';
 import { NzAutosizeDirective } from 'ng-zorro-antd/input';
 
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { take, takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'nz-text-edit',
@@ -68,14 +69,14 @@ export class NzTextEditComponent implements OnInit, OnDestroy {
   @Input() icon: NzTSType = 'edit';
   @Input() tooltip?: null | NzTSType;
   @Output() readonly startEditing = new EventEmitter<void>();
-  @Output() readonly endEditing = new EventEmitter<string>();
+  @Output() readonly endEditing = new EventEmitter<string>(true);
   @ViewChild('textarea', { static: false }) textarea!: ElementRef<HTMLTextAreaElement>;
   @ViewChild(NzAutosizeDirective, { static: false }) autosizeDirective!: NzAutosizeDirective;
 
   beforeText?: string;
   currentText?: string;
   nativeElement = this.host.nativeElement;
-  constructor(private host: ElementRef, private cdr: ChangeDetectorRef, private i18n: NzI18nService) {}
+  constructor(private zone: NgZone, private host: ElementRef, private cdr: ChangeDetectorRef, private i18n: NzI18nService) {}
 
   ngOnInit(): void {
     this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
@@ -119,11 +120,12 @@ export class NzTextEditComponent implements OnInit, OnDestroy {
   }
 
   focusAndSetValue(): void {
-    setTimeout(() => {
+    this.zone.onStable.pipe(take(1), takeUntil(this.destroy$)).subscribe(() => {
       if (this.textarea?.nativeElement) {
         this.textarea.nativeElement.focus();
         this.textarea.nativeElement.value = this.currentText || '';
         this.autosizeDirective.resizeToFitContent();
+        this.cdr.markForCheck();
       }
     });
   }

components/typography/typography.component.ts

@@ -211,6 +211,7 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
     if (this.nzContent === text) {
       this.renderOnNextFrame();
     }
+    this.cdr.markForCheck();
   }
 
   onExpand(): void {

components/typography/typography.spec.ts

@@ -1,10 +1,10 @@
 import { ENTER } from '@angular/cdk/keycodes';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
-import { Component, ViewChild } from '@angular/core';
+import { Component, NgZone, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { createKeyboardEvent, dispatchFakeEvent, dispatchMouseEvent, typeInElement } from 'ng-zorro-antd/core/testing';
+import { createKeyboardEvent, dispatchFakeEvent, dispatchMouseEvent, MockNgZone, typeInElement } from 'ng-zorro-antd/core/testing';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 
@@ -18,10 +18,12 @@ describe('typography', () => {
   let componentElement: HTMLElement;
   let overlayContainer: OverlayContainer;
   let overlayContainerElement: HTMLElement;
+  let zone: MockNgZone;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [CommonModule, NzTypographyModule, NzIconTestModule, NoopAnimationsModule],
+      providers: [{ provide: NgZone, useFactory: () => (zone = new MockNgZone()) }],
       declarations: [
         NzTestTypographyComponent,
         NzTestTypographyCopyComponent,
@@ -248,32 +250,42 @@ describe('typography', () => {
       fixture.detectChanges();
     }));
 
-    it('should edit work', () => {
+    it('should edit work', fakeAsync(() => {
       const editButton = componentElement.querySelector<HTMLButtonElement>('.ant-typography-edit');
       editButton!.click();
       fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+
       expect(testComponent.str).toBe('This is an editable text.');
       const textarea = componentElement.querySelector<HTMLTextAreaElement>('textarea')!;
       typeInElement('test', textarea);
       fixture.detectChanges();
       dispatchFakeEvent(textarea, 'blur');
+
+      fixture.detectChanges();
+      flush();
       fixture.detectChanges();
+
       expect(testComponent.str).toBe('test');
-    });
+    }));
 
     it('should edit focus', fakeAsync(() => {
       const editButton = componentElement.querySelector<HTMLButtonElement>('.ant-typography-edit');
       editButton!.click();
+
       fixture.detectChanges();
-      flush();
-      fixture.detectChanges();
+      zone.simulateZoneExit();
+
       const textarea = componentElement.querySelector<HTMLTextAreaElement>('textarea')! as HTMLTextAreaElement;
+
       expect(document.activeElement === textarea).toBe(true);
       dispatchFakeEvent(textarea, 'blur');
+      flush();
       fixture.detectChanges();
     }));
 
-    it('should apply changes when Enter keydown', () => {
+    it('should apply changes when Enter keydown', fakeAsync(() => {
       const editButton = componentElement.querySelector<HTMLButtonElement>('.ant-typography-edit');
       editButton!.click();
       fixture.detectChanges();
@@ -282,9 +294,12 @@ describe('typography', () => {
       fixture.detectChanges();
       const event = createKeyboardEvent('keydown', ENTER, textarea);
       testComponent.nzTypographyComponent.textEditRef!.onEnter(event);
+
+      flush();
       fixture.detectChanges();
+
       expect(testComponent.str).toBe('test');
-    });
+    }));
   });
 
   describe('ellipsis', () => {