From 6e1175ee553144591ddf3a592d5efd6b1cef9380 Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel-git@c0ntroller.de>
Date: Sun, 12 Jun 2022 15:19:24 +0200
Subject: [PATCH] Fix tabbing

---
 components/REPL/REPLInput.tsx | 30 ++++++++++++++++++------------
 lib/commands/index.ts         |  2 +-
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/components/REPL/REPLInput.tsx b/components/REPL/REPLInput.tsx
index 31cb10b..441d921 100644
--- a/components/REPL/REPLInput.tsx
+++ b/components/REPL/REPLInput.tsx
@@ -15,7 +15,7 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
     const typed = createRef<HTMLSpanElement>();
     const completion = createRef<HTMLSpanElement>();
     const [currentCmd, setCurrentCmd] = useState<string[]>([]);
-    const [justTabbed, setJustTabbed] = useState<number>(0);
+    let [justTabbed, setJustTabbed] = useState<number>(0); // Because setters are not in sync but the events are too fast
     const [inCmdHistory, setInCmdHistory] = useState<number>(-1);
     const [cmdHistory, setCmdHistory] = useState<string[]>([]);
     const [usrInputTmp, setUsrInputTmp] = useState<string>("");
@@ -29,7 +29,7 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
         //if(typed.current) typed.current.innerHTML = input;
         //if(completion.current) completion.current.innerHTML = "";
         inputRef.dispatchEvent(new Event("input", { bubbles: true }));
-        inputRef.dispatchEvent(new Event("change", { bubbles: true }));
+        inputRef.dispatchEvent(new Event("change", { bubbles: true,  }));
     };
 
     const clearInput = (inputRef: HTMLInputElement) => {
@@ -52,24 +52,30 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
             return;
         } else {
             input.maxLength = 20;
-            // Get completion hint
-            const suggest = CommandInterface.commandCompletion(currentInput);
-            setCurrentCmd(suggest);
-            if (suggest.length === 0) suggest.push("");
-            if (typed.current) typed.current.innerHTML = currentInput;
-            if (completion.current) completion.current.innerHTML = suggest[0].substring(currentInput.length);
+            if(justTabbed === 0) {
+                // Get completion hint
+                const suggest = CommandInterface.commandCompletion(currentInput);
+                setCurrentCmd(suggest);
+                
+                if (suggest.length === 0) suggest.push("");
+                if (typed.current) typed.current.innerHTML = currentInput;
+                if (completion.current) completion.current.innerHTML = suggest[0].substring(currentInput.length);
+            } else {
+                if (typed.current) typed.current.innerHTML = "";
+                if (completion.current) completion.current.innerHTML = "";
+            }
         }        
     };
 
     const keyEvent = (e: React.KeyboardEvent<HTMLInputElement>) => {
         const input = (e.target as HTMLInputElement);
-        if (e.key === "Tab") {
-            e.preventDefault();
-        }
+        if (e.key === "Tab") e.preventDefault();
+
         if (e.key === "Tab" && currentCmd.length !== 0) {
             const cmd = `${currentCmd[justTabbed % currentCmd.length]}${currentCmd.length === 1 ? " " : ""}`;
-            setInput(input, cmd);
             setJustTabbed(justTabbed + 1);
+            justTabbed += 1; // Because setters are not in sync but the events are too fast
+            setInput(input, cmd);
             return false;
         } else setJustTabbed(0);
 
diff --git a/lib/commands/index.ts b/lib/commands/index.ts
index 32cf3a6..7f78519 100644
--- a/lib/commands/index.ts
+++ b/lib/commands/index.ts
@@ -17,7 +17,7 @@ export class CommandInterface {
 
     static commandCompletion(input: string): string[] {
         if (input === "") return [];
-        const candidates = commandList.filter(cmd => cmd.name.substring(0, input.length) === input).map(cmd => cmd.name);
+        const candidates = commandList.filter(cmd => cmd.name.startsWith(input)).map(cmd => cmd.name);
         return candidates;
     }