tdesign-react
tdesign-react copied to clipboard
fix(Input): avoid blur and focus when click icon
🤔 这个 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/>元素之外的区域时,触发多余onBlur和onFocus回调的问题 -
[ ] 本条 PR 不需要纳入 Changelog
☑️ 请求合并前的自查清单
⚠️ 请自检并全部勾选全部选项。⚠️
- [x] 文档已补充或无须补充
- [x] 代码演示已提供或无须提供
- [x] TypeScript 定义已补充或无须补充
- [x] Changelog 已提供或无须提供
