diff --git a/packages/core/src/hooks/useKeyboard/useKeyboard.demo.tsx b/packages/core/src/hooks/useKeyboard/useKeyboard.demo.tsx index 54514e7c..30c60a9a 100644 --- a/packages/core/src/hooks/useKeyboard/useKeyboard.demo.tsx +++ b/packages/core/src/hooks/useKeyboard/useKeyboard.demo.tsx @@ -2,22 +2,28 @@ import { useKeyboard } from '@siberiacancode/reactuse'; import { useState } from 'react'; const Demo = () => { - const [pressedKeys, setPressedKeys] = useState([]); + // Use object to track both key (character) and code (physical key) + // this solves the keyboard layout switching issue + const [pressedKeys, setPressedKeys] = useState<{ key: string; code: string }[]>([]); useKeyboard({ - onKeyDown: (event) => { + onKeyDown: (event: KeyboardEvent) => { event.preventDefault(); setPressedKeys((prevPressedKeys) => { - if (!prevPressedKeys.includes(event.key)) { - return [...prevPressedKeys, event.key]; + // Check by event.code (physical key), not by event.key (character) + // this prevents duplication when switching keyboard layout + if (!prevPressedKeys.some(({ code }) => code === event.code)) { + return [...prevPressedKeys, { key: event.key, code: event.code }]; } return prevPressedKeys; }); }, - onKeyUp: (event) => { + onKeyUp: (event: KeyboardEvent) => { event.preventDefault(); setPressedKeys((prevPressedKeys) => - prevPressedKeys.filter((key) => key.toLowerCase() !== event.key.toLowerCase()) + // Remove by event.code to correctly handle key release + // regardless of current keyboard layout + prevPressedKeys.filter(({ code }) => code !== event.code) ); } }); @@ -26,8 +32,8 @@ const Demo = () => {
Currently pressed keys:
- {pressedKeys.map((key) => ( - {key} + {pressedKeys.map(({ key, code }) => ( + {key} ))}