Skip to content

feat(textarea): add clearable support - #4319

Open
Phoen1xCode wants to merge 7 commits into
Tencent:developfrom
Phoen1xCode:feat/textarea-clearable
Open

feat(textarea): add clearable support#4319
Phoen1xCode wants to merge 7 commits into
Tencent:developfrom
Phoen1xCode:feat/textarea-clearable

Conversation

@Phoen1xCode

Copy link
Copy Markdown

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

Closes Tencent/tdesign-common#2566

💡 需求背景和解决方案

Textarea 组件目前不支持与 Input 一致的 clearable 清空能力。该 PR 为 React Textarea 新增 clearable 属性和 onClear 事件,支持用户 hover 到多行文本框时点击清空图标快速清空内容。

实现内容:

  1. 新增 clearable?: boolean,默认值为 false
  2. 新增 onClear?: (context: { e: MouseEvent }) => void
  3. 扩展 onChange context,支持 trigger?: 'input' | 'initial' | 'clear'
  4. Textarea.tsx 中接入 hover 状态、清空图标展示和清空逻辑
  5. 清空时通过 useControlled setter 将值更新为 '',并触发 onChange('', { trigger: 'clear' })onClear
  6. 新增 clearable 示例、API 文档和测试用例

注意:packages/components/textarea/type.tsdefaultProps.ts 为生成文件,本 PR 已按本地开发流程手动补充;后续需要同步在 https://github.com/tdesignoteam/tdesign-api 提交对应 API 变更。

验证:

  • pnpm vitest run packages/components/textarea/__tests__/textarea.test.tsx
  • pnpm vitest run
  • pnpm eslint packages/components/textarea --ext .ts,.tsx

效果展示:

2026-07-02.03-32-28.mov

📝 更新日志

  • 本条 PR 不需要纳入 Changelog

tdesign-react

  • feat(Textarea): 支持 clearable 清空功能和 onClear 事件

@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 29, 2026

Copy link
Copy Markdown
  • tdesign-react-demo

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

commit: 4f7b6e8

@uyarn uyarn added the 💭 discussion we are discussing label Jul 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

💭 discussion we are discussing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Textarea] 增加可清空内容

3 participants