fix(module:input): do not set box-sizing when measuring

NG-ZORRO · Jan 18, 2022 · 63f2dff · 63f2dff
1 parent 69c6258
commit 63f2dff
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 32 deletions.
diff --git a/components/input/autosize.spec.ts b/components/input/autosize.spec.ts
@@ -90,6 +90,20 @@ describe('autoresize', () => {
         expect(textarea.clientHeight).toBe(textarea.scrollHeight, 'Expected textarea height to match its scrollHeight');
       }));
 
+      it('should not resize the textarea if it is hidden', fakeAsync(() => {
+        testComponent.hidden = true;
+        fixture.detectChanges();
+        let previousHeight = textarea.clientHeight;
+        testComponent.value = '1\n'.repeat(10);
+        flush();
+        fixture.detectChanges();
+        flush();
+        autosize.resizeToFitContent();
+        zone.simulateZoneExit();
+        fixture.detectChanges();
+        expect(textarea.clientHeight).toEqual(previousHeight, 'Expected textarea is not resized.');
+      }));
+
       it('should trigger a resize when the window is resized', fakeAsync(() => {
         spyOn(autosize, 'resizeToFitContent');
 
@@ -215,36 +229,19 @@ describe('autoresize', () => {
 });
 
 @Component({
-  template: ` <textarea nz-input nzAutosize [ngModel]="value"></textarea> `,
+  template: ` <textarea nz-input nzAutosize [ngModel]="value" [hidden]="hidden"></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;
-      }
-    `
-  ]
+  styleUrls: ['../ng-zorro-antd.less']
 })
 export class NzTestInputWithTextAreaAutoSizeStringComponent {
   value = '';
+  hidden = false;
 }
 
 @Component({
   template: ` <textarea nz-input ngModel [nzAutosize]="{ minRows: minRows, maxRows: maxRows }"></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;
-      }
-    `
-  ]
+  styleUrls: ['../ng-zorro-antd.less']
 })
 export class NzTestInputWithTextAreaAutoSizeObjectComponent {
   minRows = 2;
@@ -254,16 +251,7 @@ export class NzTestInputWithTextAreaAutoSizeObjectComponent {
 @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;
-      }
-    `
-  ]
+  styleUrls: ['../ng-zorro-antd.less']
 })
 export class NzTestInputWithTextAreaAutoSizeBooleanComponent {
   value = '';

diff --git a/components/input/style/patch.less b/components/input/style/patch.less
@@ -4,7 +4,6 @@ textarea.nz-textarea-autosize-measuring {
   // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect
   // measurement. We just have to account for it later and subtract it off the final result.
   padding: 2px 0 !important;
-  box-sizing: content-box !important;
 }
 
 .@{search-prefix} {