From fdee8bac53d0ae63a2485ef958d3d1d11986e192 Mon Sep 17 00:00:00 2001
From: Bandarenka Yura <ydaren@gmail.com>
Date: Sat, 23 Aug 2025 22:36:46 +0300
Subject: [PATCH] =?UTF-8?q?#358=20=F0=9F=A7=8A=20[bug]=20:=20hook=20useKey?=
 =?UTF-8?q?board=20#358?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hooks/useKeyboard/useKeyboard.demo.tsx    | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

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<string[]>([]);
+  // 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 = () => {
     <div>
       <span>Currently pressed keys:</span>
       <div className='flex flex-wrap gap-2'>
-        {pressedKeys.map((key) => (
-          <code key={key}>{key}</code>
+        {pressedKeys.map(({ key, code }) => (
+          <code key={code}>{key}</code>
         ))}
       </div>
     </div>