[Tabs] Textarea values not shown in hidden tabs · angular/components#5222

(9 评论) (3 反应) (1 负责人)TypeScript (24,044 star) (6,650 fork)batch import

P2area: material/tabshelp wanted

描述

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

贡献者指南

技术栈: typescript
领域: frontend
议题类型: bug
难度: 3
预计时间: 1-3 hours
活动状态: stale
清晰度: mostly clear
前置要求: AngularAngular MaterialTabs
新手友好度: 40
研究方向: 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.