-
Notifications
You must be signed in to change notification settings - Fork 360
fix(Input): avoid blur and focus when click icon #3996
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: develop
Are you sure you want to change the base?
Conversation
commit: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR fixes an issue where clicking the clear or password visibility toggle icons in the Input component triggers unwanted onBlur and onFocus callbacks. The issue occurred because clicking icons caused the input to lose focus momentarily, and the wrapper div's onClick handler would immediately refocus it, creating a blur→focus sequence even though the UI remained focused.
Key Changes:
- Introduced
isClickingIconRefto track when icons are being clicked - Added guards in
handleFocusandhandleBlurto skip callback execution during icon clicks - Added
onMouseDownhandler to password toggle icon (clear icon already had it)
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/components/input/Input.tsx | Implements the fix by using a ref flag to prevent blur/focus callbacks when clicking clear or password icons, and reorganizes imports |
| packages/components/input/tests/input.test.tsx | Imports mockTimeout utility and adds async wait in existing test to validate the timing of the fix |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.
5fed86a to
6775691
Compare
688eda9 to
dc11c70
Compare
packages/components/input/Input.tsx
Outdated
| e.nativeEvent.stopImmediatePropagation(); | ||
| } | ||
| function handleMouseDown(e: React.MouseEvent<HTMLDivElement>) { | ||
| e.preventDefault(); // 防止焦点转移 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
handleMousedown 阻止默认行为估计会有很多没有考虑的影响 还是input这么底层的组件本身

🤔 这个 PR 的性质是?
🔗 相关 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 不失去焦点,从而重新聚焦📝 更新日志
fix(Input): 修复点击原生
<input/>元素之外的区域时,触发多余onBlur和onFocus回调的问题本条 PR 不需要纳入 Changelog
☑️ 请求合并前的自查清单