Fix Auto Hide

EFB/efb-js.patch

@@ -2,7 +2,95 @@ Index: EFB.js
 ===================================================================
 --- EFB.js
 +++ EFB.js
-@@ -30209,9 +30209,9 @@
+@@ -29548,18 +29548,17 @@
+       "{shift} Z X C V B N M /",
+       "{space} {close}"
+     ]
+   };
+-  var Keyboard = (0, import_react4.forwardRef)(({ value, inputRef, onInput, onClose }, ref) => {
++  var Keyboard = (0, import_react4.forwardRef)(({ value, blurRef, onInput, onClose }, ref) => {
+     const [shift, setShift] = (0, import_react4.useState)(false);
+     const layout = shift ? defaultLayout.shift : defaultLayout.default;
+     const handleKeyPress = (key) => {
+-      var _a;
+       if (key === "{close}") {
+         onClose();
+         return;
+       }
+-      (_a = inputRef.current) == null ? void 0 : _a.focus();
++      blurRef.current = true;
+       if (key === "{shift}") {
+         setShift(!shift);
+         return;
+       }
+@@ -29603,12 +29602,8 @@
+                   "button",
+                   {
+                     className: `flex justify-center rounded-md p-4 ${key === "{close}" ? "bg-zinc-700 px-12 focus:bg-zinc-600" : "flex-1 bg-zinc-600"}`,
+                     onMouseDown: () => handleKeyPress(key),
+-                    onMouseUp: () => {
+-                      var _a;
+-                      return (_a = inputRef.current) == null ? void 0 : _a.focus();
+-                    },
+                     children: keyIdent
+                   },
+                   `key-${rowIndex}-${keyIndex}`
+                 );
+@@ -29628,9 +29623,9 @@
+   function Input(props) {
+     const [guid] = (0, import_react5.useState)(v4_default());
+     const ref = (0, import_react5.useRef)(null);
+     const keyboardRef = (0, import_react5.useRef)(null);
+-    const blurTimeoutRef = (0, import_react5.useRef)();
++    const blurRef = (0, import_react5.useRef)(false);
+     const [isFocused, setFocused] = (0, import_react5.useState)(false);
+     const [showKeyboard, setShowKeyboard] = (0, import_react5.useState)(false);
+     (0, import_react5.useEffect)(() => {
+       if (simulator() === 0 /* MSFS */) {
+@@ -29660,25 +29655,23 @@
+           placeholder: props.placeholder,
+           disabled: props.disabled,
+           onFocus: () => {
+             var _a;
+-            clearTimeout(blurTimeoutRef.current);
+             if (!isFocused) {
+               setFocused(true);
+               setShowKeyboard(true);
+               (_a = ref.current) == null ? void 0 : _a.select();
+             }
+           },
+           onBlur: (e) => {
+             var _a;
+-            if ((_a = keyboardRef.current) == null ? void 0 : _a.contains(e.relatedTarget)) {
+-              return;
+-            }
+-            blurTimeoutRef.current = setTimeout(() => {
+-              if (props.onBlur) props.onBlur(e.target.value);
+-              if (isFocused) setFocused(false);
++            if (blurRef.current && isFocused) (_a = ref.current) == null ? void 0 : _a.focus();
++            else {
+               setShowKeyboard(false);
+-            }, 100);
++              setFocused(false);
++              (_a = ref.current) == null ? void 0 : _a.blur();
++            }
++            blurRef.current = false;
+           },
+           onChange: (e) => {
+             if (props.onChange) props.onChange(e.target.value);
+           },
+@@ -29690,9 +29683,9 @@
+         Keyboard_default,
+         {
+           ref: keyboardRef,
+           value: String(props.value),
+-          inputRef: ref,
++          blurRef: blurRef,
+           onInput: (value) => props.onChange && props.onChange(value),
+           onClose: () => {
+             var _a;
+             setShowKeyboard(false);
+@@ -30209,9 +30202,9 @@
          {
            className: "middle none center rounded-lg bg-green-700 px-6 py-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none",
            "data-ripple-light": "true",
@@ -13,7 +101,7 @@ Index: EFB.js
        ) }) })
      ] }) }) });
    }
-@@ -40562,8 +40562,13 @@
+@@ -40562,8 +40555,13 @@
        ] })
      ] }) }) });
    }
@@ -27,7 +115,7 @@ Index: EFB.js
    init_common();
    var import_jsx_runtime15 = __toESM(require_jsx_runtime());
    var routes = {
-@@ -40578,9 +40583,9 @@
+@@ -40578,9 +40576,9 @@
        button: {
          title: "Payload",
          icon: Weight

PackageSources/js-bundle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tfdidesign-md11-load-manager",
-  "version": "0.1.153",
+  "version": "0.1.164",
   "description": "",
   "main": "index.js",
   "type": "module",
@@ -59,6 +59,7 @@
     "typescript": "5.8.3"
   },
   "dependencies": {
+    "lucide-react": "^0.555.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "uuid": "^11.1.0"

PackageSources/js-bundle/pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      lucide-react:
+        specifier: ^0.555.0
+        version: 0.555.0(react@19.1.0)
       react:
         specifier: ^19.1.0
         version: 19.1.0
@@ -1897,6 +1900,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-react@0.555.0:
+    resolution: {integrity: sha512-D8FvHUGbxWBRQM90NZeIyhAvkFfsh3u9ekrMvJ30Z6gnpBHS6HC6ldLg7tL45hwiIz/u66eKDtdA23gwwGsAHA==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
@@ -4842,6 +4850,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-react@0.555.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+
   magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0

PackageSources/js-bundle/src/components/keyboard/Keyboard.tsx

@@ -0,0 +1,107 @@
+import { ArrowBigUp, Delete, Space, X } from 'lucide-react';
+import { forwardRef, RefObject, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+const defaultLayout = {
+  default: [
+    '1 2 3 4 5 6 7 8 9 0 {bksp}',
+    'q w e r t y u i o p',
+    'a s d f g h j k l',
+    '{shift} z x c v b n m /',
+    '{space} {close}',
+  ],
+  shift: [
+    '1 2 3 4 5 6 7 8 9 0 {bksp}',
+    'Q W E R T Y U I O P',
+    'A S D F G H J K L',
+    '{shift} Z X C V B N M /',
+    '{space} {close}',
+  ],
+};
+
+const Keyboard = forwardRef<
+  HTMLDivElement,
+  {
+    value: string;
+    blurRef: RefObject<boolean>
+    onInput: (value: string) => void;
+    onClose: () => void;
+  }
+>(({ value, blurRef, onInput, onClose }, ref) => {
+  const [shift, setShift] = useState(false);
+
+  const layout = shift ? defaultLayout.shift : defaultLayout.default;
+
+  const handleKeyPress = (key: string) => {
+    console.log('KEY PRESSED', key);
+
+    if (key === '{close}') {
+      onClose();
+      return;
+    }
+
+    blurRef.current = true;
+
+    if (key === '{shift}') {
+      setShift(!shift);
+      return;
+    }
+
+    let newValue = value;
+
+    if (key === '{bksp}') {
+      newValue = value.slice(0, -1);
+    } else if (key === '{space}') {
+      newValue = value + ' ';
+    } else if (key.length === 1) {
+      newValue = value + key;
+    }
+
+    onInput(newValue);
+  };
+
+  return createPortal(
+    <div
+      ref={ref}
+      className="absolute bottom-0 left-0 z-50 box-border w-full touch-manipulation select-none overflow-hidden bg-zinc-800 p-2 text-white"
+      onClick={() => console.log('Parent click captured')}
+    >
+      {layout.map((row, rowIndex) => (
+        <div key={`row-${rowIndex}`} className="mb-1 flex w-full justify-center gap-1">
+          {row.split(' ').map((key, keyIndex) => {
+            let keyIdent = <>{key}</>;
+            switch (key) {
+              case '{shift}':
+                keyIdent = <ArrowBigUp />;
+                break;
+              case '{bksp}':
+                keyIdent = <Delete />;
+                break;
+              case '{close}':
+                keyIdent = <X />;
+                break;
+              case '{space}':
+                keyIdent = <Space />;
+                break;
+            }
+
+            return (
+              <button
+                key={`key-${rowIndex}-${keyIndex}`}
+                className={`flex justify-center rounded-md p-4 ${
+                  key === '{close}' ? 'bg-zinc-700 px-12 focus:bg-zinc-600' : 'flex-1 bg-zinc-600'
+                }`}
+                onMouseDown={() => handleKeyPress(key)}
+              >
+                {keyIdent}
+              </button>
+            );
+          })}
+        </div>
+      ))}
+    </div>,
+    document.body
+  );
+});
+
+export default Keyboard;