diff --git a/components/table/src/table/table-content.component.ts b/components/table/src/table/table-content.component.ts index 96cd886e33f..6da42d07d37 100644 --- a/components/table/src/table/table-content.component.ts +++ b/components/table/src/table/table-content.component.ts @@ -30,6 +30,6 @@ export class NzTableContentComponent { @Input() tableLayout: NzTableLayout = 'auto'; @Input() theadTemplate: TemplateRef | null = null; @Input() contentTemplate: TemplateRef | null = null; - @Input() listOfColWidth: Array = []; + @Input() listOfColWidth: ReadonlyArray = []; @Input() scrollX: string | null = null; } diff --git a/components/table/src/table/table-inner-default.component.ts b/components/table/src/table/table-inner-default.component.ts index e5fdd48c6b9..d1b30d6a870 100644 --- a/components/table/src/table/table-inner-default.component.ts +++ b/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 = []; + @Input() listOfColWidth: ReadonlyArray = []; @Input() theadTemplate: TemplateRef | null = null; @Input() contentTemplate: TemplateRef | null = null; diff --git a/components/table/src/table/table-inner-scroll.component.ts b/components/table/src/table/table-inner-scroll.component.ts index 5cea0e70246..49dce818bd1 100644 --- a/components/table/src/table/table-inner-scroll.component.ts +++ b/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 = []; @Input() scrollX: string | null = null; @Input() scrollY: string | null = null; @Input() contentTemplate: TemplateRef | null = null; @Input() widthConfig: string[] = []; - @Input() listOfColWidth: Array = []; + @Input() listOfColWidth: ReadonlyArray = []; @Input() theadTemplate: TemplateRef | null = null; @Input() virtualTemplate: TemplateRef | null = null; @Input() virtualItemSize = 0; diff --git a/components/table/src/table/tr-measure.component.ts b/components/table/src/table/tr-measure.component.ts index 3936f0b31aa..939489682d5 100644 --- a/components/table/src/table/tr-measure.component.ts +++ b/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 = []; @Output() readonly listOfAutoWidth = new EventEmitter(); @ViewChildren('tdElement') listOfTdElement!: QueryList; private destroy$ = new Subject(); diff --git a/components/typography/text-edit.component.ts b/components/typography/text-edit.component.ts index d8abe315bc9..cd02878f2d3 100644 --- a/components/typography/text-edit.component.ts +++ b/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(); - @Output() readonly endEditing = new EventEmitter(); + @Output() readonly endEditing = new EventEmitter(true); @ViewChild('textarea', { static: false }) textarea!: ElementRef; @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(); } }); } diff --git a/components/typography/typography.component.ts b/components/typography/typography.component.ts index e2e9af413ea..7dddd3aafdc 100644 --- a/components/typography/typography.component.ts +++ b/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 { diff --git a/components/typography/typography.spec.ts b/components/typography/typography.spec.ts index 96991ae7dde..d89b605f0af 100644 --- a/components/typography/typography.spec.ts +++ b/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('.ant-typography-edit'); editButton!.click(); fixture.detectChanges(); + flush(); + fixture.detectChanges(); + expect(testComponent.str).toBe('This is an editable text.'); const textarea = componentElement.querySelector('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('.ant-typography-edit'); editButton!.click(); + fixture.detectChanges(); - flush(); - fixture.detectChanges(); + zone.simulateZoneExit(); + const textarea = componentElement.querySelector('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('.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', () => {