Keyboard shortcut doesn't always respect the OS keyboard layout

[chandlerc]

Describe the bug

On phanpy.social, with macOS + Chrome, and with a Dvorak keyboard layout, the physical c key is mapped to j by the Dovark layout. However, hitting that key doesn't cause the j keyboard shortcut (next post) as expected. Instead, it triggers the c keyboard shortcut (create a new post). Hitting k (physical key v) works as expected (previous post). Hitting c (physical key i) also works as expected (create a new post). It's only the physical c key that seems to do the physical keyboard shortcut rather than the layout-correct shortcut.

Holding shift while hitting j (physical c key) also does the create-post-in-new-window.

To Reproduce

1. Go to https://phanpy.social/
2. Hit the j key in Dvorak layout on macOS Chrome (physical c key)
3. Starts to "create post" as if I had hit the c key.

Expected behavior I expect hitting j key in Dvorak (physical c key) to do the j shortcut action.

Desktop:

• OS: macOS
• Browser: Chrome
• Version: 119.0.6045.123

[cheeaun]

Did a quick research, some notes; react-hotkeys-hook library used on Phanpy uses KeyboardEvent.code which ignores keyboard layout https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event#keyboardevent.code

Warning: This ignores the user's keyboard layout, so that if the user presses the key at the "Y" position in a QWERTY keyboard layout (near the middle of the row above the home row), this will always return "KeyY", even if the user has a QWERTZ keyboard (which would mean the user expects a "Z" and all the other properties would indicate a "Z") or a Dvorak keyboard layout (where the user would expect an "F"). If you want to display the correct keystrokes to the user, you can use Keyboard.getLayoutMap().

Next version of react-hotkeys-hook might fix this, but it's not out yet.

Just to set expectations, this'll take some time to fix 🙇‍♂️

[cpbotha]

I ran into this exact bug just now. Both Safari and Edge (latest) on macOS 14.4.1.

It seems to be only the j (for next post) which on this Dvorak maps to physical c.

k which is on physical v does go previous post, and many of the other hotkeys do work.

BTW, phanpy is great, thank you @cheeaun! This was my first post with it: https://phanpy.social/#/emacs.ch/s/112257747391567920?view=full

[lypanov]

Looks like this is on the way with version 5 of react-hotkeys-hook: https://github.com/JohannesKlauss/react-hotkeys-hook/issues/1040#issuecomment-1935690351