diff --git a/components/input/autosize.directive.ts b/components/input/autosize.directive.ts index 82bfa125336..590e8bbda08 100644 --- a/components/input/autosize.directive.ts +++ b/components/input/autosize.directive.ts @@ -25,7 +25,7 @@ export interface AutoSizeType { } }) export class NzAutosizeDirective implements AfterViewInit, OnDestroy, DoCheck { - private autosize: boolean | AutoSizeType = false; + private autosize: boolean = false; private el: HTMLTextAreaElement | HTMLInputElement = this.elementRef.nativeElement; private cachedLineHeight!: number; private previousValue!: string; @@ -42,10 +42,10 @@ export class NzAutosizeDirective implements AfterViewInit, OnDestroy, DoCheck { const isAutoSizeType = (data: string | boolean | AutoSizeType): data is AutoSizeType => { return typeof data !== 'string' && typeof data !== 'boolean' && (!!data.maxRows || !!data.minRows); }; - if (typeof value === 'string') { + if (typeof value === 'string' || value === true) { this.autosize = true; } else if (isAutoSizeType(value)) { - this.autosize = value; + this.autosize = true; this.minRows = value.minRows; this.maxRows = value.maxRows; this.maxHeight = this.setMaxHeight(); diff --git a/components/input/autosize.spec.ts b/components/input/autosize.spec.ts index 03b0cd909f4..ff2811cf67f 100644 --- a/components/input/autosize.spec.ts +++ b/components/input/autosize.spec.ts @@ -13,7 +13,11 @@ describe('autoresize', () => { waitForAsync(() => { TestBed.configureTestingModule({ imports: [NzInputModule, FormsModule, ReactiveFormsModule], - declarations: [NzTestInputWithTextAreaAutoSizeStringComponent, NzTestInputWithTextAreaAutoSizeObjectComponent], + declarations: [ + NzTestInputWithTextAreaAutoSizeStringComponent, + NzTestInputWithTextAreaAutoSizeObjectComponent, + NzTestInputWithTextAreaAutoSizeBooleanComponent + ], providers: [ { provide: NgZone, @@ -134,6 +138,65 @@ describe('autoresize', () => { ); })); }); + describe('textarea autosize boolean', () => { + let fixture: ComponentFixture; + let testComponent: NzTestInputWithTextAreaAutoSizeBooleanComponent; + let textarea: HTMLTextAreaElement; + let autosize: NzAutosizeDirective; + + beforeEach(() => { + fixture = TestBed.createComponent(NzTestInputWithTextAreaAutoSizeBooleanComponent); + testComponent = fixture.debugElement.componentInstance; + fixture.detectChanges(); + textarea = fixture.debugElement.query(By.directive(NzAutosizeDirective)).nativeElement; + autosize = fixture.debugElement.query(By.directive(NzAutosizeDirective)).injector.get(NzAutosizeDirective); + }); + it('should resize the textarea based on its ngModel', fakeAsync(() => { + let previousHeight = textarea.clientHeight; + testComponent.value = ` + Once upon a midnight dreary, while I pondered, weak and weary, + Over many a quaint and curious volume of forgotten lore— + While I nodded, nearly napping, suddenly there came a tapping, + As of some one gently rapping, rapping at my chamber door. + “’Tis some visitor,” I muttered, “tapping at my chamber door— + Only this and nothing more.”`; + flush(); + // Manually call resizeTextArea instead of faking an `input` event. + fixture.detectChanges(); + flush(); + autosize.resizeToFitContent(); + zone.simulateZoneExit(); + fixture.detectChanges(); + expect(textarea.clientHeight).toBeGreaterThan(previousHeight, 'Expected textarea to have grown with added content.'); + expect(textarea.clientHeight).toBe(textarea.scrollHeight, 'Expected textarea height to match its scrollHeight'); + + previousHeight = textarea.clientHeight; + testComponent.value += ` + Ah, distinctly I remember it was in the bleak December; + And each separate dying ember wrought its ghost upon the floor. + Eagerly I wished the morrow;—vainly I had sought to borrow + From my books surcease of sorrow—sorrow for the lost Lenore— + For the rare and radiant maiden whom the angels name Lenore— + Nameless here for evermore.`; + fixture.detectChanges(); + flush(); + fixture.detectChanges(); + autosize.resizeToFitContent(true); + zone.simulateZoneExit(); + fixture.detectChanges(); + expect(textarea.clientHeight).toBeGreaterThan(previousHeight, 'Expected textarea to have grown with added content.'); + expect(textarea.clientHeight).toBe(textarea.scrollHeight, 'Expected textarea height to match its scrollHeight'); + })); + + it('should trigger a resize when the window is resized', fakeAsync(() => { + spyOn(autosize, 'resizeToFitContent'); + + dispatchFakeEvent(window, 'resize'); + tick(16); + + expect(autosize.resizeToFitContent).toHaveBeenCalled(); + })); + }); }); }); @@ -177,3 +240,23 @@ export class NzTestInputWithTextAreaAutoSizeObjectComponent { minRows = 2; maxRows = 2; } + +@Component({ + template: ` + + `, + encapsulation: ViewEncapsulation.None, + styles: [ + ` + textarea.cdk-textarea-autosize-measuring { + height: auto !important; + overflow: hidden !important; + padding: 2px 0 !important; + box-sizing: content-box !important; + } + ` + ] +}) +export class NzTestInputWithTextAreaAutoSizeBooleanComponent { + value = ''; +}