NG-ZORRO/ng-zorro-antd

textarea nzAutosize not working #2646

tmirun posted onGitHub

Version

7.0.0-rc.1

Environment

chrome last version

https://stackblitz.com/edit/ng-zorro-antd-start-zbiyqr?file=src%2Fapp%2Fapp.component.html

Steps to reproduce

you can see

What is expected?

autosize textarea

What is actually happening?

nzAutosize minRows and maxRows not working

Other?

<!-- generated by ng-zorro-issue-helper. DO NOT REMOVE -->


The main reason is follow:

nzAutosize must work with ngModel or ReactiveForm

In your stackblitz, you can see your console.

In the nz-autoresize.directive, you can see the next code.

ngAfterViewInit(): void {
    if (this.nzAutosize && this.platform.isBrowser) {
      if (this.ngControl) {
        this.ngZone.runOutsideAngular(() => {
          fromEvent(window, 'resize')
          .pipe(auditTime(16), takeUntil(this.destroy$))
          .subscribe(() => this.resizeToFitContent(true));
        });
        this.ngControl.control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => this.resizeToFitContent());
      } else {
        console.warn('nzAutosize must work with ngModel or ReactiveForm');
      }
    }
  }

So you can add ngModel in your code. Like my stackblitz code

posted by NearZXH over 6 years ago

But one more interesting thing is that the height of the textarea is not suitable in my browser, chrome. I check the code of nz-autoresize.directive, it's mainly have some problem in the function of cacheTextareaLineHeight

posted by NearZXH over 6 years ago

@issuehuntfest has funded $20.00 to this issue. See it on IssueHunt

posted by IssueHuntBot over 6 years ago

@NearZXH ty for your answer =), it is working now, but i still have a question, when i changed minRows value to 1, the textarea height is not correct i think, in before version 7.0.rc0 show only 1 row, but now show 2 rows.

have this problem when 3 days ago i updated to version from 7.0.rc0 to 7.0.rc1

image

posted by tmirun about 6 years ago

Yes, i check the diff between rc0 and rc1, ng-zorro rebuild the nzAutosize from an @input attr of nz-input.directive into a independent directive called nz-autoresize.directive, so i suggest you can use the rc0 as a temporary solution.

posted by NearZXH about 6 years ago

I made a 7.0.0-rc0 and 7.0.0-rc1 stackblitz code, so you can find the diff.

posted by NearZXH about 6 years ago

It seems in 7.0.0-rc1, ng-zorro tries to use the same way as cdk autosize.ts does to auto resize the textarea's height.

I try to use both methods to implement textarea auto resize here, but either cdkTextareaAutosize or nzAutosize can not get the right height of textarea. As @NearZXH said mainly because cacheTextareaLineHeight function get different lineHeight, because the cacheTextareaLineHeight is calculated at different time.

  • In cdkTextareaAutosize, the first time cacheTextareaLineHeight calculated is during ngDoCheck. At that time no stylesheets was added to the textarea element, and we get 21px as the cacheTextareaLineHeight.
  • In nzAutosize, the first time cacheTextareaLineHeight calculated is inside valueChanges callback function. At that time related stylesheets was added to the textarea element, and we get 32px as the cacheTextareaLineHeight.

It seems cdkTextareaAutosize get the right cacheTextareaLineHeight cause 32px is the actual height of the textarea.

But in cdkTextareaAutosize, it only use the cacheTextareaLineHeight * (min/max)Rows to calculate minHeight and maxHeight without considering top-bottom padding and border width makes the textarea narrower than it should be.

I think maybe there is some ng-zorro styles may have influence on the calculation of lineHeight.

posted by vaanxy about 6 years ago

Hi @tmirun @NearZXH after checking the cdk source code, I found we miss the host binding rows: 1 here https://github.com/angular/material2/blob/master/src/cdk/text-field/autosize.ts#L32, and the textarea.scrollHeight should minus 10px other than 4px we will fix it in next version. Thanks a lot!

posted by vthinkxie about 6 years ago

Fund this Issue

$20.00
Funded
Only logged in users can fund an issue

Pull requests

Recent activities

issuehuntfest funded 20.00 for NG-ZORRO/ng-zorro-antd# 2646
over 6 years ago