fix(Input): avoid blur and focus when click icon#3996
Open
fix(Input): avoid blur and focus when click icon#3996
Conversation
HaixingOoO
approved these changes
Dec 2, 2025
commit: |
Contributor
Contributor
There was a problem hiding this comment.
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.
5fed86a to
6775691
Compare
688eda9 to
dc11c70
Compare
uyarn
reviewed
Dec 11, 2025
packages/components/input/Input.tsx
Outdated
| e.nativeEvent.stopImmediatePropagation(); | ||
| } | ||
| function handleMouseDown(e: React.MouseEvent<HTMLDivElement>) { | ||
| e.preventDefault(); // 防止焦点转移 |
Collaborator
There was a problem hiding this comment.
handleMousedown 阻止默认行为估计会有很多没有考虑的影响 还是input这么底层的组件本身
HaixingOoO
approved these changes
Dec 16, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

🤔 这个 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
☑️ 请求合并前的自查清单