palantir/blueprint

TextArea with growVertically doesn't get decreased when removing text

Open

#3,860 创建于 2019年11月19日

在 GitHub 查看
 (3 评论) (4 反应) (0 负责人)TypeScript (20,263 star) (2,167 fork)batch import
P2Package: coreType: enhancementhelp wanted

描述

Environment

  • Package version(s): 3.18.0
  • Browser and OS versions: Safari 13.0.3 running at macOS 10.15.1 (originally found this bug Electron 5.0.3 that comes with Chrome 73.0, macOS, Windows)

Reproducing example

Steps to reproduce

  1. Open link to the example above;
  2. Focus at the TextArea;
  3. Select all and remove text content from the TextArea, either remove in any other way.

Actual behavior

TextArea component doesn't decrease its height.

Expected behaviour

TextArea is decreasing height according to the content height.

Possible solution

As I can see, TextArea uses its scrollHeight property that, seems like won't change after height has been already set and the content is less than element height. So we could try to reset it's height to auto (or other little value like a 10px) and then set actual height from scrollHeight. But it may cause some jumping so needs tests in the real-world. Looking for another workarounds, so I'll return here in case of success.

Hope this is not a duplicate since it would be time blowing for me and you!⌛️

贡献者指南

技术栈
typescriptreacthtmlcss
领域
frontend
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
fresh
清晰度议题是否清楚说明期望改动、验收标准和下一步。
mostly clear
前置要求
ReactTypeScriptDOM manipulation basics
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
70
研究方向
Examine the TextArea component in Blueprint's source code, likely in packages/react components/src/components/textarea/textarea.tsx. The current implementation uses scrollHeight to set height when growVertically is enabled, but it does not account for content removal. A potential fix is to reset the height to 'auto' before reading scrollHeight to allow it to shrink. Test with the provided codesandbox example. Review comments for any additional context or constraints from maintainers.