From 28249fcae965496d0842d53d346c3af9a6d2fa2a Mon Sep 17 00:00:00 2001
From: Marc Brooks <IDisposable@gmail.com>
Date: Wed, 3 Sep 2025 21:22:56 -0500
Subject: [PATCH] feat(ui) Fix the CapsLock and Shift key for VirtualKeyboard

---
 ui/src/components/VirtualKeyboard.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/VirtualKeyboard.tsx b/ui/src/components/VirtualKeyboard.tsx
index 60bfa7b1..8b23d47c 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 || false;
+  }, [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;