bug(cdkTextareaAutosize): Resizing only works properly if material styles are included

[maro1993]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Reproduction steps

Note: all Reproduction steps can be found in this repository

1. Initialize project, install angular cdk 13.2.6, angular 13.2.6
2. create a textarea, bind the cdkTextareaAutosize to it (optionally bind max and min rows)
3. Fill Textarea with some characters
   
4. Delete some lines to force a resize of the textarea ( by selecting multiple lines with the cursor or keyboard arrows )
5. Textarea is not resized
   

Having a look at the problem

After some work i managed to narrow this down a bit. Apparently the resizing is working when a material-theme like indigo-pink.css is present and included in angular.json.

"styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.scss" ]

At first that didnt make a lot of sense to me so i started debugging a bit aswell. Apparently with this stylesheet present the method measureScrollHeight in autosize.ts is yielding a different result as when this stylesheet is not present. After checking the method i saw that there are some classes beeing added. So my suspection is that maybe one of those is missing without the stylesheet beeing present. After that i didnt proceed to check more and hope that this gives a direction how one can proceed solving this.

A minimal working repo with styles in angular.json can also be found here ( https://github.com/maro1993/resize-example )

Reproduction

reproduction repo of the bug -> https://github.com/maro1993/resize-example-cdk

a working example with an material theme beeing included and material package beeing added in package.json https://github.com/maro1993/resize-example

Expected Behavior

expect textarea to resize ( more details in the description)

Actual Behavior

textarea did not resize ( more details in the description)

Environment

• Browser(s): Chrome Version 99.0.4844.51 (Offizieller Build) (64-Bit), Firefox 91.5.1esr (64-Bit
• Operating System Windows 10

"dependencies": {
"@angular/animations": "~13.2.0",
"@angular/cdk": "^13.2.6",
"@angular/common": "~13.2.0",
"@angular/compiler": "~13.2.0",
"@angular/core": "~13.2.0",
"@angular/forms": "~13.2.0",
"@angular/material": "^13.2.6",
"@angular/platform-browser": "~13.2.0",
"@angular/platform-browser-dynamic": "~13.2.0",
"@angular/router": "~13.2.0",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.2.6",
"@angular/cli": "~13.2.6",
"@angular/compiler-cli": "~13.2.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"jasmine-core": "~4.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.5.2"
}

[crisbeto]

Material includes the CDK structural styles automatically, but if you don't use Material, you can import them yourself. You can use either @import '@angular/cdk/a11y-prebuilt.css' or @use '@angular/cdk' and then include the cdk.text-field-autosize mixin.

[maro1993]

@crisbeto thanks, adding "./node_modules/@angular/cdk/text-field-prebuilt.css" solved this or like you mentioned @use '@angular/cdk' and then include the cdk.text-field-autosize. I will close this

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}