Skip to content

feat(textarea): add clearable support#4319

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

feat(textarea): add clearable support#4319
Phoen1xCode wants to merge 5 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 已提供或无须提供

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.

[Textarea] 增加可清空内容

1 participant