Skip to content

Conversation

@RylanBot
Copy link
Collaborator

@RylanBot RylanBot commented Dec 2, 2025

🤔 这个 PR 的性质是?

  • 日常 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

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

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

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

@pkg-pr-new
Copy link

pkg-pr-new bot commented Dec 2, 2025

commit: da08bef

@github-actions
Copy link
Contributor

github-actions bot commented Dec 2, 2025

完成

Copy link
Contributor

Copilot AI left a 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 isClickingIconRef to track when icons are being clicked
  • Added guards in handleFocus and handleBlur to skip callback execution during icon clicks
  • Added onMouseDown handler 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.

Copy link
Contributor

Copilot AI left a 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.

@RylanBot RylanBot force-pushed the rylan/fix/input/blur branch 3 times, most recently from 5fed86a to 6775691 Compare December 2, 2025 14:15
@RylanBot RylanBot force-pushed the rylan/fix/input/blur branch from 688eda9 to dc11c70 Compare December 2, 2025 14:21
e.nativeEvent.stopImmediatePropagation();
}
function handleMouseDown(e: React.MouseEvent<HTMLDivElement>) {
e.preventDefault(); // 防止焦点转移
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

handleMousedown 阻止默认行为估计会有很多没有考虑的影响 还是input这么底层的组件本身

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.

4 participants