angular / angular/components

bug(cdkTextareaAutosize): Textarea padding breaks auto-height work

Open
#26,997 8 comments 14 reactions 0 assignees View on GitHub
area: cdk/text-field P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Description

It is not possible to set vertical padding for Textarea
- it doesn't count
- as you enter text, the height of the field increases without adding a newline

### Reproduction

Steps to reproduce:
1. Use
```
cdkTextareaAutosize
cdkAutosizeMinRows="1"
cdkAutosizeMaxRows="10"
```
3. Add padding to style ".textarea {padding: 10px;}"

### Expected Behavior

- added padding
- the height only changes when the text is increased by one line

### Actual Behavior

- field height increases for each letter
- vertical padding is not taken into account

stackblitz - [https://stackblitz.com/edit/angular-zqu9zw](https://stackblitz.com/edit/angular-zqu9zw?file=src%2Fmain-component.html)

### Environment

- Angular: 15.2.8
- CDK/Material: 15.2.8
- Browser(s): Chrome Version 112.0.5615.138
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

Contributor guide

Open the contributing guide

Research direction

Start with the cdkTextareaAutosize reproduction in the linked StackBlitz and compare its behavior with the stated padding and row settings. The work is done when vertical padding is included in the calculated height and the textarea grows only when the text adds a line.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.