angular/components

[Tabs] Textarea values not shown in hidden tabs

Open

#5222 opened on Jun 19, 2017

View on GitHub
 (9 comments) (3 reactions) (1 assignee)TypeScript (24,044 stars) (6,650 forks)batch import
P2area: material/tabshelp wanted

Description

Bug, feature request, or proposal:

The value of text area with mdTextareaAutosize is not visible until the size of the text area is recalculated (with resizeToFitContent() or by typing) when the text area is inside an MdTab that is not initially visible. The min rows is also not working.

What is the expected behavior?

The text area value is visible and min rows works.

What is the current behavior?

The text area value is not visible until the value change by typing or resizeToFitContent is called and min rows doesn't works.

What are the steps to reproduce?

http://plnkr.co/edit/h4EYvCm36ncKlJolJnhU?p=preview Open plunker and go to the second tab.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 4.2.3 Material: 2.0.0-beta.6 Windows 10 Typescript: 2.3.4

Contributor guide

Tech stack
typescript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
AngularAngular MaterialTabs
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
The issue occurs because the textarea autosize directive calculates its size based on the element's offsetHeight, which is 0 when the tab is hidden. Investigate how Angular Material Tabs handle visibility (e.g., using display:none or visibility:hidden) and whether the autosize directive needs to recalculate when the tab becomes visible. Look at the directive's source code in https://github.com/angular/components/blob/main/src/material/input/autosize.ts and the tab component to understand lifecycle hooks. Consider adding a method to trigger recalculation when the tab is shown, or adjusting the directive to handle hidden elements.