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

Author: IDisposable

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;

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,