js_lis 2.0.7 → 3.0.0

package/VirtualKeyboard.js

@@ -14,10 +14,17 @@ export class VirtualKeyboard {
     this.shiftActive = false;
     this.capsLockActive = false;
     this.isScrambled = false;
-    this.isVirtualKeyboardActive = false; 
+    this.isVirtualKeyboardActive = false;
 
     this.inputPlaintextBuffers = new WeakMap();
-    
+
+    // FIX BUG-2: เก็บ bound reference เพื่อให้ removeEventListener ทำงานได้
+    this._boundDrag = this.drag.bind(this);
+    this._boundStopDrag = this.stopDrag.bind(this);
+
+    // FIX WARN-3: เก็บ flag ว่า listeners ถูก add ไปแล้วหรือยัง
+    this._listenersInitialized = false;
+
     this.initialize();
   }
 
@@ -25,7 +32,11 @@ export class VirtualKeyboard {
     try {
       injectCSS();
       this.render();
-      this.initializeInputListeners();
+      // FIX WARN-3: เรียก initializeInputListeners ครั้งเดียวเท่านั้น
+      if (!this._listenersInitialized) {
+        this.initializeInputListeners();
+        this._listenersInitialized = true;
+      }
       console.log("VirtualKeyboard initialized successfully.");
     } catch (error) {
       console.error("Error initializing VirtualKeyboard:", error);
@@ -65,30 +76,118 @@ export class VirtualKeyboard {
       }
     });
 
-    document.addEventListener("focus", (e) => {
+    document.addEventListener(
+      "focus",
+      (e) => {
         const target = e.target;
         if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
           this.setCurrentInput(target, !this.isVirtualKeyboardActive);
         }
       },
-      true
+      true,
     );
 
-    //Add real keyboard input listeners to handle encryption
+    // FIX BUG-4: handle paste event เพื่อ sync buffer
+    document.addEventListener("paste", (e) => {
+      const target = e.target;
+      if (
+        (target.tagName === "INPUT" || target.tagName === "TEXTAREA") &&
+        target === this.currentInput &&
+        !this.isVirtualKeyboardActive
+      ) {
+        e.preventDefault();
+        const pasteText = (e.clipboardData || window.clipboardData).getData(
+          "text",
+        );
+        if (!pasteText) return;
+
+        const start = target.selectionStart;
+        const end = target.selectionEnd;
+        const buffer = this.getCurrentBuffer();
+        const newBuffer =
+          buffer.slice(0, start) + pasteText + buffer.slice(end);
+        this.setCurrentBuffer(newBuffer);
+        this.updateDisplayedValue(false);
+
+        const newCursorPos = start + pasteText.length;
+        setTimeout(() => {
+          target.setSelectionRange(newCursorPos, newCursorPos);
+          target.focus();
+        }, 0);
+
+        const event = new Event("input", { bubbles: true });
+        target.dispatchEvent(event);
+      }
+    });
+
+    // FIX BUG-4: handle cut event เพื่อ sync buffer
+    document.addEventListener("cut", (e) => {
+      const target = e.target;
+      if (
+        (target.tagName === "INPUT" || target.tagName === "TEXTAREA") &&
+        target === this.currentInput &&
+        !this.isVirtualKeyboardActive
+      ) {
+        const start = target.selectionStart;
+        const end = target.selectionEnd;
+        if (start === end) return;
+
+        const buffer = this.getCurrentBuffer();
+        const selectedText = buffer.slice(start, end);
+
+        e.preventDefault();
+        e.clipboardData.setData("text/plain", selectedText);
+
+        const newBuffer = buffer.slice(0, start) + buffer.slice(end);
+        this.setCurrentBuffer(newBuffer);
+        this.updateDisplayedValue(false);
+
+        setTimeout(() => {
+          target.setSelectionRange(start, start);
+          target.focus();
+        }, 0);
+
+        const event = new Event("input", { bubbles: true });
+        target.dispatchEvent(event);
+      }
+    });
+
     document.addEventListener("input", (e) => {
       const target = e.target;
-      if ((target.tagName === "INPUT" || target.tagName === "TEXTAREA") && target === this.currentInput) {
+      if (
+        (target.tagName === "INPUT" || target.tagName === "TEXTAREA") &&
+        target === this.currentInput
+      ) {
         if (!this.isVirtualKeyboardActive) {
-          this.handleRealKeyboardInput(target);
+          this.handleRealKeyboardInput(target, e);
         }
       }
     });
 
-    // Add real keyboard arrow key support
     document.addEventListener("keydown", (e) => {
       const target = e.target;
-      if ((target.tagName === "INPUT" || target.tagName === "TEXTAREA") && target === this.currentInput) {
-        if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.code)) {
+      if (
+        (target.tagName === "INPUT" || target.tagName === "TEXTAREA") &&
+        target === this.currentInput
+      ) {
+        const navKeys = [
+          "ArrowLeft",
+          "ArrowRight",
+          "ArrowUp",
+          "ArrowDown",
+          "Home",
+          "End",
+        ];
+
+        if (!navKeys.includes(e.code)) {
+          this.isVirtualKeyboardActive = false;
+        }
+
+        if (!this.isVirtualKeyboardActive) {
+          this.handleRealKeyboardKeydown(target, e);
+        }
+
+        if (navKeys.includes(e.code)) {
           setTimeout(() => {
             target.focus();
           }, 0);
@@ -109,29 +208,14 @@ export class VirtualKeyboard {
 
     this.currentInput = inputElement;
     this.currentInput.classList.add("keyboard-active");
-
     this.currentInput.focus();
-    
-    // Ensure buffer initialized for this input
+
     if (!this.inputPlaintextBuffers.has(this.currentInput)) {
-      const ds = this.currentInput.dataset ? this.currentInput.dataset.encrypted : undefined;
-      let initial = "";
-      try {
-        if (ds && window.VKCrypto && typeof window.VKCrypto.decrypt === "function") {
-          initial = window.VKCrypto.decrypt(ds) || "";
-        } else {
-          initial = this.currentInput.value || "";
-        }
-      } catch (_) {
-        initial = this.currentInput.value || "";
-      }
+      const initial = this.currentInput.value || "";
       this.inputPlaintextBuffers.set(this.currentInput, initial);
-      this.updateDomEncrypted(this.currentInput, initial);
     }
-    // Sync visible with buffer (masking for password)
     this.updateDisplayedValue();
-    
-    // Only move cursor to end on initial focus, not during virtual keyboard operations
+
     if (moveToEnd) {
       setTimeout(() => {
         const length = this.currentInput.value.length;
@@ -140,7 +224,6 @@ export class VirtualKeyboard {
     }
   }
 
-  // [1]
   render() {
     const keyboard = document.createElement("div");
     keyboard.className = `virtual-keyboard ${this.currentLayout}`;
@@ -156,10 +239,11 @@ export class VirtualKeyboard {
 
     const layoutSelector = document.createElement("select");
     layoutSelector.id = "layout-selector";
+    layoutSelector.setAttribute("aria-label", "Select keyboard layout");
     layoutSelector.onchange = (e) => this.changeLayout(e.target.value);
 
-    const layouts = ["full", "en", "th", "numpad", "symbols"];
-    layouts.forEach((layout) => {
+    const availableLayouts = ["full", "en", "th", "numpad", "symbols"];
+    availableLayouts.forEach((layout) => {
       const option = document.createElement("option");
       option.value = layout;
       option.innerText = this.getLayoutName(layout);
@@ -181,15 +265,25 @@ export class VirtualKeyboard {
         keyElement.className = "keyboard-key key";
         keyElement.textContent = key;
         keyElement.type = "button";
-
         keyElement.dataset.key = key;
 
+        // FIX IMP-4: เพิ่ม aria-label บนทุก key
+        keyElement.setAttribute(
+          "aria-label",
+          key === " "
+            ? "spacebar"
+            : key === "backspace" || key === "Backspace"
+              ? "backspace"
+              : key,
+        );
+
         if (index >= row.length - 4) {
           keyElement.classList.add("concat-keys");
         }
 
-        if (key === "Space") {
-          keyElement.className += " space";
+        if (key === " ") {
+          keyElement.className += " spacebar";
+          keyElement.innerHTML = "";
         }
 
         if (key === "backspace" || key === "Backspace") {
@@ -197,6 +291,14 @@ export class VirtualKeyboard {
           keyElement.innerHTML = '<i class="fa fa-backspace"></i>';
         }
 
+        // FIX WARN-2: restore active state หลัง re-render
+        if (key === "Caps 🄰" && this.capsLockActive) {
+          keyElement.classList.add("active", "bg-gray-400");
+        }
+        if (key === "Shift ⇧" && this.shiftActive) {
+          keyElement.classList.add("active", "bg-gray-400");
+        }
+
         keyElement.onclick = (e) => {
           e.preventDefault();
           const keyPressed = keyElement.dataset.key || keyElement.textContent;
@@ -216,16 +318,16 @@ export class VirtualKeyboard {
     this.container.innerHTML = "";
     this.container.appendChild(keyboard);
 
+    // FIX BUG-2: ใช้ bound reference แทน bind() inline
     keyboard.addEventListener("mousedown", (event) => this.startDrag(event));
   }
 
-  // [2]
-  async handleKeyPress(keyPressed) {
+  // FIX BUG-3 & WARN-5: เปลี่ยนเป็น sync, จัดการ isVirtualKeyboardActive อย่างถูกต้อง
+  handleKeyPress(keyPressed) {
     if (!this.currentInput) return;
-    
-    // Set flag to indicate virtual keyboard is active
+
     this.isVirtualKeyboardActive = true;
-    
+
     const start = this.currentInput.selectionStart;
     const end = this.currentInput.selectionEnd;
     const buffer = this.getCurrentBuffer();
@@ -234,9 +336,7 @@ export class VirtualKeyboard {
     const isShiftActive = this.shiftActive;
 
     const convertToCorrectCase = (char) => {
-      if (isCapsActive || isShiftActive) {
-        return char.toUpperCase();
-      }
+      if (isCapsActive || isShiftActive) return char.toUpperCase();
       return char.toLowerCase();
     };
 
@@ -246,71 +346,32 @@ export class VirtualKeyboard {
     }
 
     if (keyPressed === "scr" || keyPressed === "scrambled") {
-      if (this.currentLayout === "en") {
-        if (this.isScrambled) {
-          this.unscrambleKeys();
-        } else {
-          this.scrambleEnglishKeys();
-        }
-        this.isScrambled = !this.isScrambled;
-        document
-          .querySelectorAll('.key[data-key="scrambled"]')
-          .forEach((key) => {
-            key.classList.toggle("active", this.isScrambled);
-          });
-      }
-
-      if (this.currentLayout === "th") {
-        if (this.isScrambled) {
-          this.unscrambleKeys();
-        } else {
-          this.scrambleThaiKeys();
-        }
+      const layoutScrambleMap = {
+        en: () =>
+          this.isScrambled ? this.unscrambleKeys() : this.scrambleEnglishKeys(),
+        th: () =>
+          this.isScrambled ? this.unscrambleKeys() : this.scrambleThaiKeys(),
+        numpad: () =>
+          this.isScrambled ? this.unscrambleKeys() : this.scrambleKeyboard(),
+        symbols: () =>
+          this.isScrambled ? this.unscrambleKeys() : this.scrambleSymbols(),
+        full: () =>
+          this.isScrambled
+            ? this.unscrambleKeys()
+            : this.scrambleFullLayoutKeys(),
+      };
+
+      const handler = layoutScrambleMap[this.currentLayout];
+      if (handler) {
+        handler();
         this.isScrambled = !this.isScrambled;
         document
-          .querySelectorAll('.key[data-key="scrambled"]')
+          .querySelectorAll('.key[data-key="scr"], .key[data-key="scrambled"]')
           .forEach((key) => {
             key.classList.toggle("active", this.isScrambled);
           });
       }
 
-      if (this.currentLayout === "numpad") {
-        if (this.isScrambled) {
-          this.unscrambleKeys();
-        } else {
-          this.scrambleKeyboard();
-        }
-        this.isScrambled = !this.isScrambled;
-        document.querySelectorAll('.key[data-key="scr"]').forEach((key) => {
-          key.classList.toggle("active", this.isScrambled);
-        });
-      }
-
-      if (this.currentLayout === "symbols") {
-        if (this.isScrambled) {
-          this.unscrambleKeys();
-        } else {
-          this.scrambleSymbols();
-        }
-        this.isScrambled = !this.isScrambled;
-        document.querySelectorAll('.key[data-key="scr"]').forEach((key) => {
-          key.classList.toggle("active", this.isScrambled);
-        });
-      }
-
-      if (this.currentLayout === "full") {
-        if (this.isScrambled) {
-          this.unscrambleKeys();
-        } else {
-          this.scrambleFullLayoutKeys();
-        }
-        this.isScrambled = !this.isScrambled;
-        document
-          .querySelectorAll('.key[data-key="scrambled"]')
-          .forEach((key) => {
-            key.classList.toggle("active", this.isScrambled);
-          });
-      }
       this.isVirtualKeyboardActive = false;
       return;
     }
@@ -323,11 +384,10 @@ export class VirtualKeyboard {
           this.currentInput.setSelectionRange(0, 0);
           this.currentInput.focus();
         }, 5);
-        // Skip the general cursor repositioning for navigation keys
         this.isVirtualKeyboardActive = false;
         return;
 
-      case "END":
+      case "END": {
         const bufferLengthEnd = this.getCurrentBuffer().length;
         this.currentInput.setSelectionRange(bufferLengthEnd, bufferLengthEnd);
         this.currentInput.focus();
@@ -335,9 +395,9 @@ export class VirtualKeyboard {
           this.currentInput.setSelectionRange(bufferLengthEnd, bufferLengthEnd);
           this.currentInput.focus();
         }, 5);
-        // Skip the general cursor repositioning for navigation keys
         this.isVirtualKeyboardActive = false;
         return;
+      }
 
       case "Backspace":
       case "backspace":
@@ -347,12 +407,11 @@ export class VirtualKeyboard {
           const newCursorPos = start - 1;
           this.updateDisplayedValue(false);
           this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
-        } else {
+        } else if (start !== end) {
           const newBuffer = buffer.slice(0, start) + buffer.slice(end);
           this.setCurrentBuffer(newBuffer);
-          const newCursorPos = start;
           this.updateDisplayedValue(false);
-          this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
+          this.currentInput.setSelectionRange(start, start);
         }
         break;
 
@@ -360,24 +419,22 @@ export class VirtualKeyboard {
         if (start === end && start < buffer.length) {
           const newBuffer = buffer.slice(0, start) + buffer.slice(end + 1);
           this.setCurrentBuffer(newBuffer);
-          const newCursorPos = start;
           this.updateDisplayedValue(false);
-          this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
-        } else {
+          this.currentInput.setSelectionRange(start, start);
+        } else if (start !== end) {
           const newBuffer = buffer.slice(0, start) + buffer.slice(end);
           this.setCurrentBuffer(newBuffer);
-          const newCursorPos = start;
           this.updateDisplayedValue(false);
-          this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
+          this.currentInput.setSelectionRange(start, start);
         }
         break;
 
       case "Space":
-        await this.insertText(" ");
+        this.insertText(" ");
         break;
 
       case "Tab ↹":
-        await this.insertText("\t");
+        this.insertText("\t");
         break;
 
       case "Enter":
@@ -387,12 +444,17 @@ export class VirtualKeyboard {
           const newCursorPos = start + 1;
           this.updateDisplayedValue(false);
           this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
-        } else if (this.currentInput.tagName === "INPUT" || this.currentInput.type === "password" || this.currentInput.type === "text" ) {
+        } else if (
+          this.currentInput.tagName === "INPUT" ||
+          this.currentInput.type === "password" ||
+          this.currentInput.type === "text"
+        ) {
           if (this.currentInput.form) {
             const submitButton = this.currentInput.form.querySelector(
-              'input[type="submit"], button[type="submit"], button[type="button"], button[onclick]'
+              'input[type="submit"], button[type="submit"], button[type="button"], button[onclick]',
             );
-            if (submitButton) submitButton.click(); else this.currentInput.form.submit();
+            if (submitButton) submitButton.click();
+            else this.currentInput.form.submit();
           } else {
             const newBuffer = buffer + "\n";
             this.setCurrentBuffer(newBuffer);
@@ -409,273 +471,447 @@ export class VirtualKeyboard {
         this.toggleShift();
         break;
 
-      case "←":
+      case "←": {
         const leftNewPos = Math.max(0, start - 1);
         this.currentInput.setSelectionRange(leftNewPos, leftNewPos);
-        break;
+        this.isVirtualKeyboardActive = false;
+        return;
+      }
 
-      case "→":
+      case "→": {
         const bufferLength = this.getCurrentBuffer().length;
         const rightNewPos = Math.min(bufferLength, start + 1);
         this.currentInput.setSelectionRange(rightNewPos, rightNewPos);
-        break;
+        this.isVirtualKeyboardActive = false;
+        return;
+      }
 
       case "↑":
-      case "↓":
-        // Use the actual buffer content instead of displayed value
+      case "↓": {
         const actualText = this.getCurrentBuffer();
         const actualLines = actualText.substring(0, start).split("\n");
         const actualCurrentLineIndex = actualLines.length - 1;
         const actualCurrentLine = actualLines[actualCurrentLineIndex];
-        const actualColumnIndex = start - actualText.lastIndexOf("\n", start - 1) - 1;
+        const actualColumnIndex =
+          start - actualText.lastIndexOf("\n", start - 1) - 1;
 
         if (keyPressed === "↑" && actualCurrentLineIndex > 0) {
-          // Move to previous line
           const prevLineLength = actualLines[actualCurrentLineIndex - 1].length;
-          const upNewPos = start - actualCurrentLine.length - 1 - Math.max(0, actualColumnIndex - prevLineLength);
-          this.currentInput.setSelectionRange(Math.max(0, upNewPos), Math.max(0, upNewPos));
+          const upNewPos =
+            start -
+            actualCurrentLine.length -
+            1 -
+            Math.max(0, actualColumnIndex - prevLineLength);
+          this.currentInput.setSelectionRange(
+            Math.max(0, upNewPos),
+            Math.max(0, upNewPos),
+          );
         } else if (keyPressed === "↓") {
-          // Move to next line
           const remainingText = actualText.substring(start);
           const nextLineBreak = remainingText.indexOf("\n");
-          
           if (nextLineBreak !== -1) {
-            // There is a next line
-            const textAfterNextLineBreak = remainingText.substring(nextLineBreak + 1);
+            const textAfterNextLineBreak = remainingText.substring(
+              nextLineBreak + 1,
+            );
             const nextLineEnd = textAfterNextLineBreak.indexOf("\n");
-            const nextLineLength = nextLineEnd === -1 ? textAfterNextLineBreak.length : nextLineEnd;
-            
-            const downNewPos = start + nextLineBreak + 1 + Math.min(actualColumnIndex, nextLineLength);
+            const nextLineLength =
+              nextLineEnd === -1 ? textAfterNextLineBreak.length : nextLineEnd;
+            const downNewPos =
+              start +
+              nextLineBreak +
+              1 +
+              Math.min(actualColumnIndex, nextLineLength);
             this.currentInput.setSelectionRange(downNewPos, downNewPos);
           }
-          // If no next line, do nothing (cursor stays at current position)
         }
-        
+
         this.currentInput.focus();
-        // Skip the general cursor repositioning for arrow keys
         this.isVirtualKeyboardActive = false;
-        break;
+        return;
+      }
 
-      default:
-        const textvalue = await convertToCorrectCase(keyPressed);
-        await this.insertText(textvalue);
+      default: {
+        const textvalue = convertToCorrectCase(keyPressed);
+        this.insertText(textvalue);
+        break;
+      }
     }
 
     if (isShiftActive && !isCapsActive) this.toggleShift();
 
     this.currentInput.focus();
 
+    // FIX BUG-3: reset flag หลัง setTimeout เพื่อป้องกัน real keyboard listener เข้ามาแทรก
     setTimeout(() => {
-      this.currentInput.focus();
-      const cursorPos = this.currentInput.selectionStart;
-      this.currentInput.setSelectionRange(cursorPos, cursorPos);
+      if (this.currentInput) {
+        this.currentInput.focus();
+        const cursorPos = this.currentInput.selectionStart;
+        this.currentInput.setSelectionRange(cursorPos, cursorPos);
+      }
+      this.isVirtualKeyboardActive = false;
     }, 0);
-    
+
     this.currentInput.focus();
     const event = new Event("input", { bubbles: true });
     this.currentInput.dispatchEvent(event);
   }
 
-  // [3]
-  async insertText(text) {
+  insertText(text) {
     const start = this.currentInput.selectionStart;
     const end = this.currentInput.selectionEnd;
-    const textvalue = text; 
 
     const buffer = this.getCurrentBuffer();
-    const newBuffer = buffer.slice(0, start) + textvalue + buffer.slice(end);
+    const newBuffer = buffer.slice(0, start) + text + buffer.slice(end);
     this.setCurrentBuffer(newBuffer);
-    
-    const newCursorPos = start + textvalue.length;
-    
+
+    const newCursorPos = start + text.length;
     this.updateDisplayedValue(false);
-    
     this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
   }
 
-  // Helper: get current plaintext buffer for active input
   getCurrentBuffer() {
     if (!this.currentInput) return "";
     return this.inputPlaintextBuffers.get(this.currentInput) || "";
   }
 
-  // Helper: set buffer and update encrypted dataset
+  getBufferForInput(inputElement) {
+    if (!inputElement) return "";
+    const bufferedValue = this.inputPlaintextBuffers.get(inputElement);
+    if (typeof bufferedValue === "string") {
+      return bufferedValue;
+    }
+    return inputElement.value || "";
+  }
+
   setCurrentBuffer(newBuffer) {
     if (!this.currentInput) return;
     this.inputPlaintextBuffers.set(this.currentInput, newBuffer);
-    this.updateDomEncrypted(this.currentInput, newBuffer);
   }
 
-  // Helper: reflect masked value in the visible input/textarea
   updateDisplayedValue(preserveCursor = true) {
     if (!this.currentInput) return;
     const buffer = this.getCurrentBuffer();
     const isPassword = this.currentInput.type === "password";
     const maskChar = "•";
-    
-    // Store current cursor position only if we want to preserve it
+
     const currentStart = preserveCursor ? this.currentInput.selectionStart : 0;
     const currentEnd = preserveCursor ? this.currentInput.selectionEnd : 0;
-    
-    this.currentInput.value = isPassword ? maskChar.repeat(buffer.length) : buffer;
-    
-    // Restore cursor position after updating value only if preserving
+
+    this.currentInput.value = isPassword
+      ? maskChar.repeat(buffer.length)
+      : buffer;
+
     if (preserveCursor) {
       this.currentInput.setSelectionRange(currentStart, currentEnd);
     }
   }
 
-  // Handle real keyboard input and encrypt it
-  handleRealKeyboardInput(input) {
+  handleRealKeyboardKeydown(input, event) {
     if (!input) return;
-    
-    // Get the current value from the input
-    const currentValue = input.value;
-    
-    // Update the plaintext buffer with the real keyboard input
-    this.inputPlaintextBuffers.set(input, currentValue);
-    
-    // Encrypt and store in data-encrypted attribute
-    this.updateDomEncrypted(input, currentValue);
-  }
 
-  // Helper: encrypt and store ciphertext in DOM attribute
-  updateDomEncrypted(input, plaintext) {
-    try {
-      const crypto = window.VKCrypto;
-  
-      if (crypto && typeof crypto.encrypt === "function") {
-        const cipher = plaintext.length ? crypto.encrypt(plaintext) : "";
-        input.dataset.encrypted = cipher;
-      } else {
-        // No encryption function available — don't store anything
-        console.warn("Encryption unavailable. Not storing plaintext.");
-        input.dataset.encrypted = "";
+    const key = event.key;
+    const start = input.selectionStart;
+    const end = input.selectionEnd;
+    const buffer = this.getCurrentBuffer();
+
+    if (event.ctrlKey || event.altKey || event.metaKey) {
+      // FIX BUG-6: handle Ctrl+A
+      if ((event.ctrlKey || event.metaKey) && key === "a") {
+        // Allow default selection — no buffer change needed
+        return;
+      }
+      // FIX BUG-6: handle Ctrl+Z (undo) — best-effort: เราไม่เก็บ history จึง ignore
+      return;
+    }
+
+    if (
+      [
+        "Shift",
+        "Control",
+        "Alt",
+        "Meta",
+        "CapsLock",
+        "Tab",
+        "Escape",
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "ArrowDown",
+        "Home",
+        "End",
+        "F1",
+        "F2",
+        "F3",
+        "F4",
+        "F5",
+        "F6",
+        "F7",
+        "F8",
+        "F9",
+        "F10",
+        "F11",
+        "F12",
+      ].includes(key)
+    ) {
+      return;
+    }
+
+    let newBuffer = buffer;
+
+    if (key === "Backspace") {
+      if (start === end && start > 0) {
+        newBuffer = buffer.slice(0, start - 1) + buffer.slice(start);
+      } else if (start !== end) {
+        newBuffer = buffer.slice(0, start) + buffer.slice(end);
+      }
+
+      event.preventDefault();
+      this.setCurrentBuffer(newBuffer);
+      this.updateDisplayedValue(false);
+
+      const newCursorPos = start === end ? Math.max(0, start - 1) : start;
+      setTimeout(() => {
+        input.setSelectionRange(newCursorPos, newCursorPos);
+        input.focus();
+      }, 0);
+    } else if (key === "Delete") {
+      if (start === end && start < buffer.length) {
+        newBuffer = buffer.slice(0, start) + buffer.slice(start + 1);
+      } else if (start !== end) {
+        newBuffer = buffer.slice(0, start) + buffer.slice(end);
+      }
+
+      event.preventDefault();
+      this.setCurrentBuffer(newBuffer);
+      this.updateDisplayedValue(false);
+
+      setTimeout(() => {
+        input.setSelectionRange(start, start);
+        input.focus();
+      }, 0);
+    } else if (key === "Enter") {
+      if (input.tagName === "TEXTAREA") {
+        newBuffer = buffer.slice(0, start) + "\n" + buffer.slice(end);
+
+        event.preventDefault();
+        this.setCurrentBuffer(newBuffer);
+        this.updateDisplayedValue(false);
+
+        const newCursorPos = start + 1;
+        setTimeout(() => {
+          input.setSelectionRange(newCursorPos, newCursorPos);
+          input.focus();
+        }, 0);
       }
-  
-    } catch (err) {
-      console.error("Failed to encrypt input:", err);
-      input.dataset.encrypted = "";
+    } else if (key.length === 1) {
+      newBuffer = buffer.slice(0, start) + key + buffer.slice(end);
+
+      event.preventDefault();
+      this.setCurrentBuffer(newBuffer);
+      this.updateDisplayedValue(false);
+
+      const newCursorPos = start + key.length;
+      setTimeout(() => {
+        input.setSelectionRange(newCursorPos, newCursorPos);
+        input.focus();
+      }, 0);
+    }
+  }
+
+  // FIX BUG-4: handleRealKeyboardInput ทำหน้าที่ sync buffer เมื่อ autocomplete / IME
+  handleRealKeyboardInput(input, event) {
+    if (!input || !event) return;
+
+    // กรณี autocomplete, IME composition, หรือ browser fill ที่ไม่ผ่าน keydown
+    // sync จาก actual value กลับมาใส่ buffer
+    if (
+      event.inputType &&
+      event.inputType.startsWith("insertReplacementText")
+    ) {
+      this.inputPlaintextBuffers.set(input, input.value);
+      return;
+    }
+
+    // IME composition end
+    if (
+      event.isComposing === false &&
+      event.inputType === "insertCompositionText"
+    ) {
+      this.inputPlaintextBuffers.set(input, input.value);
     }
   }
 
-  // [4]
   unscrambleKeys() {
-    this.keys = this.originalKeys;
     this.render();
   }
 
-  // [5]
-  toggleCapsLock() {
-    this.capsLockActive = !this.capsLockActive;
-
-    document.querySelectorAll('.key[data-key="Caps 🄰"]').forEach((key) => {
-      key.classList.toggle("active", this.capsLockActive);
-      key.classList.toggle("bg-gray-400", this.capsLockActive);
-    });
+  // FIX BUG-1: รวม toggleCapsLock และ toggleShift ให้มี updateKeyContent เดียว
+  // ลบเมธอด updateKeyContent ที่ซ้ำกันออก และใช้เมธอดเดียวที่รับ parameter
+  _updateAllKeyContent(isActive) {
+    const layoutMap = {
+      th: this.ThaiAlphabetShift,
+      en: this.EngAlphabetShift,
+      full: this.FullAlphabetShift,
+    };
+    const layout = layoutMap[this.currentLayout];
 
     document.querySelectorAll(".key").forEach((key) => {
-      const isLetter = key.dataset.key.length === 1 && /[a-zA-Zก-๙]/.test(key.dataset.key);
+      const isLetter =
+        key.dataset.key &&
+        key.dataset.key.length === 1 &&
+        /[a-zA-Zก-๙]/.test(key.dataset.key);
 
       if (isLetter) {
-        key.textContent = this.capsLockActive
+        key.textContent = isActive
           ? key.dataset.key.toUpperCase()
           : key.dataset.key.toLowerCase();
       }
-      this.updateKeyContent(key, this.capsLockActive);
+
+      if (!layout) return;
+
+      const currentChar = key.textContent.trim();
+      if (isActive && layout[currentChar]) {
+        key.textContent = layout[currentChar];
+        key.dataset.key = layout[currentChar];
+      } else if (!isActive && Object.values(layout).includes(currentChar)) {
+        const originalKey = Object.keys(layout).find(
+          (k) => layout[k] === currentChar,
+        );
+        if (originalKey) {
+          key.textContent = originalKey;
+          key.dataset.key = originalKey;
+        }
+      }
     });
   }
-  updateKeyContent(key, capsLockActive) {
-    const currentChar = key.textContent.trim();
 
-    const layouts = {
-      th: this.ThaiAlphabetShift,
-      en: this.EngAlphabetShift,
-      enSc: this.EngAlphabetShift,
-      full: this.FullAlphabetShift,
-    };
-    const layout = layouts[this.currentLayout];
-
-    if (!layout) return;
-
-    if (capsLockActive && layout[currentChar]) {
-      key.textContent = layout[currentChar];
-      key.dataset.key = layout[currentChar];
-    } else if (!capsLockActive && Object.values(layout).includes(currentChar)) {
-      const originalKey = Object.keys(layout).find((k) => layout[k] === currentChar);
-      if (originalKey) {
-        key.textContent = originalKey;
-        key.dataset.key = originalKey;
-      }
-    }
+  toggleCapsLock() {
+    this.capsLockActive = !this.capsLockActive;
+
+    document.querySelectorAll('.key[data-key="Caps 🄰"]').forEach((key) => {
+      key.classList.toggle("active", this.capsLockActive);
+      key.classList.toggle("bg-gray-400", this.capsLockActive);
+    });
+
+    // FIX BUG-1: ใช้ _updateAllKeyContent แทน updateKeyContent ที่ซ้ำกัน
+    this._updateAllKeyContent(this.capsLockActive);
   }
 
-  // [6]
   toggleShift() {
     if (this.capsLockActive) {
       return this.toggleCapsLock();
     }
 
     this.shiftActive = !this.shiftActive;
+
     document.querySelectorAll('.key[data-key="Shift ⇧"]').forEach((key) => {
       key.classList.toggle("active", this.shiftActive);
       key.classList.toggle("bg-gray-400", this.shiftActive);
     });
-  
-    document.querySelectorAll(".key").forEach((key) => {
-      const isLetter = key.dataset.key.length === 1 && /[a-zA-Zก-๙]/.test(key.dataset.key);
-  
-      if (isLetter) {
-        key.textContent = this.shiftActive
-          ? key.dataset.key.toUpperCase()
-          : key.dataset.key.toLowerCase();
-      }
-      this.updateKeyContent(key, this.shiftActive);
-    });
-  }
-  updateKeyContent(key, shiftActive) {
-    const currentChar = key.textContent.trim();
-  
-    const layouts = {
-      th: this.ThaiAlphabetShift,
-      en: this.EngAlphabetShift,
-      enSc: this.EngAlphabetShift,
-      full: this.FullAlphabetShift,
-    };
-    const layout = layouts[this.currentLayout];
-  
-    if (!layout) return;
-  
-    if (shiftActive && layout[currentChar]) {
-      key.textContent = layout[currentChar];
-      key.dataset.key = layout[currentChar];
-    } else if (!shiftActive && Object.values(layout).includes(currentChar)) {
-      const originalKey = Object.keys(layout).find((k) => layout[k] === currentChar);
-      if (originalKey) {
-        key.textContent = originalKey;
-        key.dataset.key = originalKey;
-      }
-    }
+
+    // FIX BUG-1: ใช้ _updateAllKeyContent แทน updateKeyContent ที่ซ้ำกัน
+    this._updateAllKeyContent(this.shiftActive);
   }
 
-  // [7]
-  EngAlphabetShift = { "`": "~", 1: "!", 2: "@", 3: "#", 4: "$", 5: "%", 6: "^", 7: "&", 8: "*", 9: "(", 0: ")", "-": "_", "=": "+", "[": "{", "]": "}", "\\": "|", ";": ":", "'": '"', ",": "<", ".": ">", "/": "?", };
-  ThaiAlphabetShift = { _: "%", ๅ: "+", "/": "๑", "-": "๒", ภ: "๓", ถ: "๔", "ุ": "ู", "ึ": "฿", ค: "๕", ต: "๖", จ: "๗", ข: "๘", ช: "๙", ๆ: "๐", ไ: '"', ำ: "ฎ", พ: "ฑ", ะ: "ธ", "ั": "ํ", "ี": "๋", ร: "ณ", น: "ฯ", ย: "ญ", บ: "ฐ", ล: ",", ฃ: "ฅ", ฟ: "ฤ", ห: "ฆ", ก: "ฏ", ด: "โ", เ: "ฌ", "้": "็", "่": "๋", า: "ษ", ส: "ศ", ว: "ซ", ง: ".", ผ: "(", ป: ")", แ: "ฉ", อ: "ฮ", "ิ": "ฺ", "ื": "์", ท: "?", ม: "ฒ", ใ: "ฬ", ฝ: "ฦ"};
-  FullAlphabetShift = { "[": "{", "]": "}", "\\": "|", ";": ":", "'": '"', ",": "<", ".": ">", "/": "?", };
+  EngAlphabetShift = {
+    "`": "~",
+    1: "!",
+    2: "@",
+    3: "#",
+    4: "$",
+    5: "%",
+    6: "^",
+    7: "&",
+    8: "*",
+    9: "(",
+    0: ")",
+    "-": "_",
+    "=": "+",
+    "[": "{",
+    "]": "}",
+    "\\": "|",
+    ";": ":",
+    "'": '"',
+    ",": "<",
+    ".": ">",
+    "/": "?",
+  };
+
+  ThaiAlphabetShift = {
+    _: "%",
+    ๅ: "+",
+    "/": "๑",
+    "-": "๒",
+    ภ: "๓",
+    ถ: "๔",
+    "ุ": "ู",
+    "ึ": "฿",
+    ค: "๕",
+    ต: "๖",
+    จ: "๗",
+    ข: "๘",
+    ช: "๙",
+    ๆ: "๐",
+    ไ: '"',
+    ำ: "ฎ",
+    พ: "ฑ",
+    ะ: "ธ",
+    "ั": "ํ",
+    "ี": "๋",
+    ร: "ณ",
+    น: "ฯ",
+    ย: "ญ",
+    บ: "ฐ",
+    ล: ",",
+    ฃ: "ฅ",
+    ฟ: "ฤ",
+    ห: "ฆ",
+    ก: "ฏ",
+    ด: "โ",
+    เ: "ฌ",
+    "้": "็",
+    "่": "๋",
+    า: "ษ",
+    ส: "ศ",
+    ว: "ซ",
+    ง: ".",
+    ผ: "(",
+    ป: ")",
+    แ: "ฉ",
+    อ: "ฮ",
+    "ิ": "ฺ",
+    "ื": "์",
+    ท: "?",
+    ม: "ฒ",
+    ใ: "ฬ",
+    ฝ: "ฦ",
+  };
+
+  FullAlphabetShift = {
+    "[": "{",
+    "]": "}",
+    "\\": "|",
+    ";": ":",
+    "'": '"',
+    ",": "<",
+    ".": ">",
+    "/": "?",
+  };
 
-  // [8]
   toggle() {
     this.isVisible = !this.isVisible;
     this.render();
   }
 
-  // [9]
+  // FIX WARN-1: reset isScrambled และ shift/caps เมื่อเปลี่ยน layout
   changeLayout(layout) {
     this.currentLayout = layout;
+    this.isScrambled = false;
+    this.shiftActive = false;
+    this.capsLockActive = false;
     this.render();
   }
 
-  // [10]
   shuffleArray(array) {
     for (let i = array.length - 1; i > 0; i--) {
       const j = Math.floor(Math.random() * (i + 1));
@@ -683,64 +919,74 @@ export class VirtualKeyboard {
     }
   }
 
-  // [11]
+  // FIX BUG-7: แก้ CSS selector — เพิ่มวงเล็บปิด ) และ fix data-key case
   scrambleKeyboard() {
     const keys = document.querySelectorAll(
-      ":not([data-key='std']):not([data-key='scr']).key:not([data-key=backspace]"
+      ":not([data-key='std']):not([data-key='scr']).key:not([data-key='backspace']):not([data-key='Backspace'])",
     );
     const numbers = "1234567890-=+%/*.()".split("");
     this.shuffleArray(numbers);
     keys.forEach((key, index) => {
-      key.textContent = numbers[index];
-      key.dataset.key = numbers[index];
+      if (index < numbers.length) {
+        key.textContent = numbers[index];
+        key.dataset.key = numbers[index];
+      }
     });
   }
 
-  // [12]
   scrambleEnglishKeys() {
     const keys = document.querySelectorAll(
-      ".key:not([data-key='scrambled']):not([data-key='std']):not([data-key='scr']):not([data-key=' ']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Tab ↹'])"
+      ".key:not([data-key='scrambled']):not([data-key='std']):not([data-key='scr']):not([data-key=' ']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Tab ↹'])",
     );
-    const englishAlphabet = "abcdefghijklmnopqrstuvwxyz/.,';\\][`1234567890-=".split("");
+    const englishAlphabet =
+      "abcdefghijklmnopqrstuvwxyz/.,';\\][`1234567890-=".split("");
     this.shuffleArray(englishAlphabet);
     keys.forEach((key, index) => {
-      key.textContent = englishAlphabet[index];
-      key.dataset.key = englishAlphabet[index];
+      if (index < englishAlphabet.length) {
+        key.textContent = englishAlphabet[index];
+        key.dataset.key = englishAlphabet[index];
+      }
     });
   }
 
-  // [13]
   scrambleThaiKeys() {
     const keys = document.querySelectorAll(
-      ".key:not([data-key='scrambled']):not([data-key='scr']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key=' ']):not([data-key='Tab ↹'])"
+      ".key:not([data-key='scrambled']):not([data-key='scr']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key=' ']):not([data-key='Tab ↹'])",
     );
-    const ThaiAlphabet = '_ๅ/-ภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ%+๑๒๓๔ู฿๕๖๗๘๙๐"ฎฑธํ๊ณฯญฐ,ฅฤฆฏโฌ็๋ษศซ.ฦฬฒ?์ฺฮฉ)('.split("");
+    const ThaiAlphabet =
+      '_ๅ/-ภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ%+๑๒๓๔ู฿๕๖๗๘๙๐"ฎฑธํ๊ณฯญฐ,ฅฤฆฏโฌ็๋ษศซ.ฦฬฒ?์ฺฮฉ)('.split(
+        "",
+      );
     this.shuffleArray(ThaiAlphabet);
     keys.forEach((key, index) => {
-      key.textContent = ThaiAlphabet[index];
-      key.dataset.key = ThaiAlphabet[index]; 
+      if (index < ThaiAlphabet.length) {
+        key.textContent = ThaiAlphabet[index];
+        key.dataset.key = ThaiAlphabet[index];
+      }
     });
   }
 
-  // []
+  // FIX BUG-7: แก้ CSS selector ของ scrambleSymbols
   scrambleSymbols() {
     const keys = document.querySelectorAll(
-      ":not([data-key='std']):not([data-key='scr']).key:not([data-key=backspace]"
+      ":not([data-key='std']):not([data-key='scr']).key:not([data-key='backspace']):not([data-key='Backspace'])",
     );
-    const numbers = "@#$%^&*()_+~`{}|\\:'<>?/[]±§¶!€£¥¢©®™℅‰†".split("");
-    this.shuffleArray(numbers);
+    const symbols = "@#$%^&*()_+~`{}|\\:'<>?/[]±§¶!€£¥¢©®™℅‰†".split("");
+    this.shuffleArray(symbols);
     keys.forEach((key, index) => {
-      key.textContent = numbers[index];
-      key.dataset.key = numbers[index];
+      if (index < symbols.length) {
+        key.textContent = symbols[index];
+        key.dataset.key = symbols[index];
+      }
     });
   }
 
-
   scrambleFullLayoutKeys() {
     const keys = document.querySelectorAll(
-      ".key:not(.concat-keys):not([data-key='scrambled']):not([data-key='std']):not([data-key='scr']):not([data-key=' ']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Tab ↹'])"
+      ".key:not(.concat-keys):not([data-key='scrambled']):not([data-key='std']):not([data-key='scr']):not([data-key=' ']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Tab ↹'])",
     );
-    const englishChars = "abcdefghijklmnopqrstuvwxyz1234567890;'\\/][`,.-=".split("");
+    const englishChars =
+      "abcdefghijklmnopqrstuvwxyz1234567890;'\\/][`,.-=".split("");
     this.shuffleArray(englishChars);
     keys.forEach((key, index) => {
       if (index < englishChars.length) {
@@ -750,20 +996,24 @@ export class VirtualKeyboard {
     });
   }
 
-  // [14] จัดการการลากคีย์บอร์ด
+  // FIX BUG-2: เก็บ bound reference และ cleanup ให้ถูกต้อง
   startDrag(event) {
     this.isDragging = true;
-    this.offsetX = event.clientX - document.getElementById("keyboard").offsetLeft;
-    this.offsetY = event.clientY - document.getElementById("keyboard").offsetTop;
+    this.offsetX =
+      event.clientX - document.getElementById("keyboard").offsetLeft;
+    this.offsetY =
+      event.clientY - document.getElementById("keyboard").offsetTop;
 
-    document.addEventListener("mousemove", this.drag.bind(this)); 
-    document.addEventListener("mouseup", () => {
-      this.isDragging = false;
-      document.removeEventListener("mousemove", this.drag.bind(this));
-    });
+    document.addEventListener("mousemove", this._boundDrag);
+    document.addEventListener("mouseup", this._boundStopDrag);
+  }
+
+  stopDrag() {
+    this.isDragging = false;
+    document.removeEventListener("mousemove", this._boundDrag);
+    document.removeEventListener("mouseup", this._boundStopDrag);
   }
 
-  // [15]
   drag(event) {
     if (this.isDragging) {
       const keyboard = document.getElementById("keyboard");
@@ -771,4 +1021,4 @@ export class VirtualKeyboard {
       keyboard.style.top = `${event.clientY - this.offsetY}px`;
     }
   }
-}
+}