From e8ef82e582922d0469a1dfb7766169a1caa9d56c Mon Sep 17 00:00:00 2001
From: Marc Brooks <IDisposable@gmail.com>
Date: Thu, 4 Sep 2025 15:26:51 -0500
Subject: [PATCH] feat(ui) Fix the CapsLock and Shift key for VirtualKeyboard
 (#779)

* feat(ui) Fix the CapsLock and Shift key for VirtualKeyboard

* PR feedback: Default LED state in store
---
 ui/src/components/VirtualKeyboard.tsx | 12 +++++++++---
 ui/src/hooks/stores.ts                |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/VirtualKeyboard.tsx b/ui/src/components/VirtualKeyboard.tsx
index 60bfa7b..83ebd72 100644
--- a/ui/src/components/VirtualKeyboard.tsx
+++ b/ui/src/components/VirtualKeyboard.tsx
@@ -25,7 +25,7 @@ function KeyboardWrapper() {
   const keyboardRef = useRef<HTMLDivElement>(null);
   const { isAttachedVirtualKeyboardVisible, setAttachedVirtualKeyboardVisibility } =
     useUiStore();
-  const { keysDownState, isVirtualKeyboardEnabled, setVirtualKeyboardEnabled } =
+  const { keyboardLedState, keysDownState, isVirtualKeyboardEnabled, setVirtualKeyboardEnabled } =
     useHidStore();
   const { handleKeyPress, executeMacro } = useKeyboard();
   const { selectedKeyboard } = useKeyboardLayout();
@@ -46,9 +46,15 @@ function KeyboardWrapper() {
     return decodeModifiers(keysDownState.modifier);
   }, [keysDownState]);
 
+  const isCapsLockActive = useMemo(() => {
+    return keyboardLedState.caps_lock;
+  }, [keyboardLedState]);
+
   const mainLayoutName = useMemo(() => {
-    return isShiftActive ? "shift" : "default";
-  }, [isShiftActive]);
+    // if you have the CapsLock "latched", then the shift state is inverted
+    const effectiveShift = isCapsLockActive ? false === isShiftActive : isShiftActive;
+    return effectiveShift ? "shift" : "default";
+  }, [isCapsLockActive, isShiftActive]);
 
   const keyNamesForDownKeys = useMemo(() => {
     const activeModifierMask = keysDownState.modifier || 0;
diff --git a/ui/src/hooks/stores.ts b/ui/src/hooks/stores.ts
index a6dc95b..a3e05d8 100644
--- a/ui/src/hooks/stores.ts
+++ b/ui/src/hooks/stores.ts
@@ -463,7 +463,7 @@ export interface HidState {
 }
 
 export const useHidStore = create<HidState>(set => ({
-  keyboardLedState: {} as KeyboardLedState,
+  keyboardLedState: { num_lock: false, caps_lock: false, scroll_lock: false, compose: false, kana: false, shift: false } as KeyboardLedState,
   setKeyboardLedState: (ledState: KeyboardLedState): void => set({ keyboardLedState: ledState }),
 
   keysDownState: { modifier: 0, keys: [0,0,0,0,0,0] } as KeysDownState,