Mantine框架中useHotkeys钩子的键盘布局兼容性问题解析

问题背景

Mantine是一个流行的React UI组件库，其中的useHotkeys钩子用于处理键盘快捷键。在最新版本中，开发者发现当使用非QWERTY键盘布局（如Colemak）时，该钩子存在一个关键的功能缺陷：它会同时响应物理键位和虚拟键位的输入，这与预期行为不符。

问题现象

当用户设置一个快捷键组合（例如"ctrl-k"）并使用Colemak布局时：

• 在Colemak布局中，物理键"n"对应虚拟键"k"
• 当前实现会同时响应"ctrl-n"（物理键）和"ctrl-k"（虚拟键）
• 预期行为应该是仅响应"ctrl-n"（当usePhysicalKeys未设置时）

技术分析

问题的根源在于条件判断逻辑的缺陷。当前实现使用以下判断条件：

(!usePhysicalKeys && virtualCondition) || physicalCondition

这个逻辑存在两个问题：

1. 当usePhysicalKeys为false时，physicalCondition仍然会被评估
2. 当virtualCondition为false时，physicalCondition会被作为备选条件执行

解决方案

经过分析，有两种可行的修复方案：

方案一：显式条件组合

if (
  key &&
  ((!usePhysicalKeys && pressedKey.toLowerCase() === key.toLowerCase()) ||
    (usePhysicalKeys && pressedCode.replace('Key', '').toLowerCase() === key.toLowerCase()))
)

方案二：三元表达式

key && (
    usePhysicalKeys ? 
        pressedCode.replace('Key', '').toLowerCase() === key.toLowerCase() :
        pressedKey.toLowerCase() === key.toLowerCase())
)

两种方案都能正确解决问题，区别主要在于代码风格：

• 方案一保持了原有的条件组合形式，更易于理解修改前后的差异
• 方案二使用三元表达式，逻辑更加清晰直观

影响范围

该问题影响所有使用非QWERTY键盘布局的用户，特别是在国际化场景下。问题存在于当前稳定版(v7.17.4)和开发中的v8版本。

最佳实践建议

对于开发者处理键盘快捷键时，建议：

1. 明确区分物理键和虚拟键的概念
2. 在跨平台/多语言应用中，优先考虑物理键绑定
3. 充分测试不同键盘布局下的快捷键行为
4. 在文档中明确说明快捷键的匹配规则

总结

Mantine的useHotkeys钩子当前实现存在键盘布局兼容性问题，通过调整条件判断逻辑可以完美解决。这个问题提醒我们在开发国际化应用时，需要特别注意输入设备的多样性，确保功能在所有场景下都能正常工作。