fix(module:input): fix [nzAutosize]="true"

NG-ZORRO · Feb 9, 2021 · cc240e3 · cc240e3
1 parent 340670d
commit cc240e3
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 4 deletions.
diff --git 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
@@ -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<NzTestInputWithTextAreaAutoSizeBooleanComponent>;
+      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: `
+    <textarea nz-input [nzAutosize]="true" [ngModel]="value"></textarea>
+  `,
+  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 = '';
+}