Chakra UI/Ark 中 NumberInput 组件本地化问题解析

问题背景

在Chakra UI/Ark项目中，NumberInput组件在处理数字输入时存在本地化支持不足的问题。具体表现为当开发者使用LocaleProvider设置特定区域语言环境时，NumberInput组件无法正确识别并应用该区域对应的数字格式化规则。

问题表现

以芬兰语区域(fi-FI)为例，当用户输入"1450.50"时：

• 期望输出：1 450,50 €（使用空格作为千分位分隔符，逗号作为小数点）
• 实际输出：€1,450.50（使用逗号作为千分位分隔符，点号作为小数点）

这种差异会导致在非英语区域的应用中出现数字显示格式不符合当地习惯的问题，影响用户体验。

技术原因分析

通过代码审查发现，问题根源在于use-number-input.ts文件中：

1. 该hook仅从useLocaleContext()中获取了dir(文本方向)属性
2. 忽略了同样重要的locale(区域设置)属性
3. 导致后续的数字格式化处理无法根据正确的区域设置进行

解决方案实现

修复方案相对简单直接：

1. 从useLocaleContext()同时获取locale和dir属性
2. 将locale属性加入初始上下文对象中
3. 确保后续的数字格式化处理能够访问到正确的区域设置

这种修改保持了组件原有架构的同时，完善了国际化支持。

技术影响评估

该修复：

1. 向后兼容，不会破坏现有功能
2. 对性能影响可忽略不计
3. 显著提升了组件的国际化能力
4. 为支持更多区域的数字格式化奠定了基础

最佳实践建议

开发者在处理数字输入时应注意：

1. 明确设置应用的目标区域
2. 测试不同区域的数字格式化表现
3. 考虑处理用户输入时的区域差异
4. 对于金融等敏感场景，要特别注意小数和千分位分隔符的正确性

该修复已合并到主分支，将在下一版本中发布。对于需要立即使用的开发者，可以考虑临时应用补丁或使用自定义hook来扩展功能。