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 ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #709 +/- ##
==========================================
- Coverage 95.95% 95.40% -0.55%
==========================================
Files 6 6
Lines 297 305 +8
Branches 78 80 +2
==========================================
+ Hits 285 291 +6
- Misses 12 14 +2 ☔ 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. |
chrome下日文输入法下有format时输入数字时数字重复。
复现地址：https://ant.design/components/input-number-cn#input-number-demo-formatter
chrome环境下，日文输入法，小键盘连续键入数字
1234， 不按Enter键，点击页面其他地方。输入框内的数字变成了$ 11,234。原因： 在onCompositionEnd 之后 还会有一次 onChange事件被触发。
Summary by CodeRabbit
新功能
测试