fix: number is duplicate when input number by keyboard's numeric keypad in Chrome #709
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough该更改在 Changes
Sequence Diagram(s)sequenceDiagram
participant 用户
participant InputNumber
用户->>InputNumber: 按下键盘
InputNumber->>InputNumber: 检查 imeCompositionRef 与 compositionRef
alt IME 组合状态活跃且未在组成中
InputNumber-->>用户: 跳过输入采集
else
InputNumber-->>用户: 正常处理输入
end
用户->>InputNumber: 触发 onBlur 事件
InputNumber->>InputNumber: 重置 imeCompositionRef 为 false
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
src/InputNumber.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-react". (The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs[email protected]_jest@29.7.0_@types[email protected]_ts-node@10.9.2_@types[email protected]_7c4f7ebbffc2379378448552943a4b8d/node_modules/@umijs/fabric/dist/eslint.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. tests/formatter.test.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-react". (The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs[email protected]_jest@29.7.0_@types[email protected]_ts-node@10.9.2_@types[email protected]_7c4f7ebbffc2379378448552943a4b8d/node_modules/@umijs/fabric/dist/eslint.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🧬 Code Definitions (1)tests/formatter.test.tsx (1)
🔇 Additional comments (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #709 +/- ##
==========================================
+ Coverage 95.95% 97.04% +1.08%
==========================================
Files 6 6
Lines 297 305 +8
Branches 78 80 +2
==========================================
+ Hits 285 296 +11
+ Misses 12 9 -3 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/InputNumber.tsx(4 hunks)tests/formatter.test.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
src/InputNumber.tsx (1)
Learnt from: bombillazo
PR: react-component/input-number#644
File: src/InputNumber.tsx:173-174
Timestamp: 2025-03-17T08:53:16.472Z
Learning: In `src/InputNumber.tsx`, within the `InternalInputNumber` component, the state variables `prevValueRef` and `inputValueRef` are typed as `string | number` to maintain consistency with existing code.
🔇 Additional comments (4)
src/InputNumber.tsx (3)
163-163: 新增引用来追踪 IME 输入状态增加了
imeCompositionRef引用以追踪输入法编辑器(IME)组合状态，这是修复数字重复输入问题的核心部分。这个引用将帮助组件区分正常输入事件和 IME 组合输入事件。
505-509: 优化 IME 输入检测逻辑根据键盘事件设置
imeCompositionRef.current状态。当按键为 'Process'（但不是 'NumpadEnter' 或 'Enter'）或者处于组合状态时，将其设置为 true；否则设置为 false。这确保了系统能准确识别 IME 输入状态。
556-556: 重置 IME 组合状态在输入框失焦时重置
imeCompositionRef.current为 false，确保下次聚焦时从干净的状态开始，防止状态残留导致的问题。tests/formatter.test.tsx (1)
66-130: 为 IME 数字键盘输入添加测试用例这个全面的测试用例模拟了使用 IME 数字键盘进行输入的场景，确保修复符合预期。测试涵盖了完整的输入流程：
- 焦点事件
- 组合开始事件
- 数字键盘按键模拟（Process 键）
- 输入值变化
- 组合结束事件
- 失焦事件
通过验证最终格式化结果（如 "1,234" 和 "12,345"），确保修复解决了 PR 中描述的问题。这个测试是重要的，因为它直接验证了 PR 的修复效果。
|
@zombieJ Could you help review the pull request? Thanks. |
|
@afc163 Could you help review the pull request? Thanks. |
| @@ -160,6 +160,7 @@ const InternalInputNumber = React.forwardRef( | |||
| const userTypingRef = React.useRef(false); | |||
| const compositionRef = React.useRef(false); | |||
| const shiftKeyRef = React.useRef(false); | |||
| const imeCompositionRef = React.useRef(false); | |||
There was a problem hiding this comment.
compositionRef 感觉就是用来做类似处理的，是不是改 compositionRef 的逻辑就可以了？避免新增这个 imeCompositionRef 吧？
There was a problem hiding this comment.
@yoyo837 compositionRef 不够的。
chrome环境下，日文输入法，小键盘连续键入数字 1234， 不按Enter键，点击页面其他地方。输入框内的数字变成了 $ 11,234。
这个问题的主要原因就是在onCompositionEnd 之后 还有一次input的 onChange 事件被触发，这个时候compositionRef.current的值已经为false了。
There was a problem hiding this comment.
这个事件顺序是符合预期的：
onCompositionStart -> onCompositionEnd -> onBlur
退出后触发一次收集值也是符合预期的行为，能录个屏看看不？我想了解一下这个输入法的行为是什么样子的。
There was a problem hiding this comment.
@zombieJ 可以的。输入的时候用的是小键盘，NumLock开启。
2025-04-10.11-49-21.mp4
There was a problem hiding this comment.
看起来是 CompositionEnd 后的一次聚合和输入的插值的冲突，我看看能不能模拟出来这种情况
There was a problem hiding this comment.
模拟不出来，晚上我在windows 上试试好了。应该是这个输入法在 End 后又做了一次 typing 导致在现在的位置上又加了一次。这个和预期的的确很矛盾，我想想。
There was a problem hiding this comment.
我不知道为什么，和你效果不一样。我输入1234的时候显示的是全角的1234，点外侧就直接清空。切换输入法为半角后就是直接输入数字，和你的效果不一样。我是 win10，你是什么系统？
chrome下日文输入法下有format时输入数字时数字重复。
复现地址：https://ant.design/components/input-number-cn#input-number-demo-formatter
chrome环境下，日文输入法，小键盘连续键入数字
1234， 不按Enter键，点击页面其他地方。输入框内的数字变成了$ 11,234。原因： 在onCompositionEnd 之后 还会有一次 onChange事件被触发。
Summary by CodeRabbit
新功能
测试