tdesign-react icon indicating copy to clipboard operation
tdesign-react copied to clipboard

fix(Input): avoid blur and focus when click icon

Open RylanBot opened this issue 1 month ago • 2 comments

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

Form 带 blur 规则校验时,点击 input 的清空按钮时,会触发 blur 里面的校验逻辑,如果不符合规则,就会闪一下错误信息 https://stackblitz.com/edit/kqqkg61k-z4prdzvq?file=src%2Fdemo.tsx,src%2Findex.css,src%2Findex.jsx

💡 需求背景和解决方案

点击 icon 时,input 的焦点消失,但由于外层 div 绑定了 onClick={(e) => {inputRef.current?.focus()} 用于确保 input 不失去焦点,从而重新聚焦

  • 因此点击 icon 会出现额外两个回调:blur -> focus
  • 但 input 的 UI 其实始终是 focus 的

📝 更新日志

  • fix(Input): 修复点击原生 <input/> 元素之外的区域时,触发多余 onBluronFocus 回调的问题

  • [ ] 本条 PR 不需要纳入 Changelog

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

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

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

RylanBot avatar Dec 02 '25 11:12 RylanBot

commit: da08bef

pkg-pr-new[bot] avatar Dec 02 '25 12:12 pkg-pr-new[bot]

完成

github-actions[bot] avatar Dec 02 '25 12:12 github-actions[bot]