Skip to content

feat(textarea): support clearable#4307

Open
AriaLEntropy wants to merge 1 commit into
Tencent:developfrom
AriaLEntropy:feat/textarea-clearable
Open

feat(textarea): support clearable#4307
AriaLEntropy wants to merge 1 commit into
Tencent:developfrom
AriaLEntropy:feat/textarea-clearable

Conversation

@AriaLEntropy

Copy link
Copy Markdown

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

Tencent/tdesign-common#2566

依赖 common PR:Tencent/tdesign-common#2583

💡 需求背景和解决方案

Textarea 当前缺少与 Input 一致的可清空能力。本 PR 为 React Textarea 组件补充 clearable API、交互逻辑、示例和测试,使多行文本输入可以快捷清空。

实现内容:

  • 新增 clearable prop
  • 新增 onClear 回调
  • 仅在有内容、非 disabled、非 readonly 且鼠标悬浮时展示清除图标
  • 点击清除图标后清空内容
  • 清空后触发 change,trigger 为 clear
  • 清空后重新聚焦 Textarea
  • 新增 clearable demo
  • 更新 Textarea 中英文文档与 usage props
  • 新增单元测试覆盖 clearable 主路径

交互行为对齐现有 Input clearable:仅在 clearable 开启、存在输入内容、非 disabled、非 readonly 且鼠标悬浮时展示清除入口,并复用 CloseCircleFilledIcon 作为清除控件。

当前 demo 聚焦展示 clearable 的主交互流程,因此只提供一个非 disabled、非 readonly 状态下的可输入 Textarea:输入区有默认内容,鼠标悬浮时展示清除图标,点击后清空内容并触发 clear 回调。这样可以直接覆盖本次 issue 关注的“快捷清空输入内容”能力,也与现有 Input clearable demo 的单输入框展示方式保持一致。

disabled、readonly、empty 等状态的行为已在组件逻辑和单元测试中覆盖。如果维护者希望在文档中补充多状态静态展示,可以后续继续追加对应 demo。

公共视觉样式由 tdesign-common 提供,本仓库只负责组件交互逻辑、事件触发、demo 与测试。

效果展示:
react

注:效果图为本地录制。录制时临时应用了依赖的 common 样式 patch,用于预览最终联动效果;提交前已移除该临时 patch,本 PR 不包含 packages/common 子模块变更。

📝 更新日志

  • 本条 PR 不需要纳入 Changelog

tdesign-react

  • feat(Textarea): 支持 clearable 可清空能力

@tdesign-react/chat

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须补充
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

@tdesign-bot

Copy link
Copy Markdown
Collaborator

TDesign Component Site Preview Open

Component Preview
tdesign-react 完成
@tdesign-react/chat 完成

@pkg-pr-new

pkg-pr-new Bot commented Jul 1, 2026

Copy link
Copy Markdown
  • tdesign-react-demo

    npm i https://pkg.pr.new/Tencent/tdesign-react@4307
    
    npm i https://pkg.pr.new/Tencent/tdesign-react/@tdesign-react/chat@4307
    

commit: 1d10027

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants