Set focus on input

components/REPL/REPLHistory.tsx

@@ -1,8 +1,16 @@
 import { NextPage } from "next";
+import { MutableRefObject } from "react";
 import styles from "../../styles/REPL/REPLHistory.module.css";
 
-const REPLHistory: NextPage<{history: string[]}> = ({history}) => {
-    return <div className={styles.container}>
+interface REPLHistoryParams {
+    history: string[];
+    inputRef: MutableRefObject<HTMLInputElement|undefined>;
+}
+
+const REPLHistory: NextPage<REPLHistoryParams> = ({history, inputRef}) => {
+    const focusInput = () => {if (inputRef.current) inputRef.current.focus();};
+
+    return <div className={styles.container} onClick={focusInput}>
         { history.map((value, idx) => <div className={styles.line} key={idx}>{value === "" ? "\u00A0" : value}</div>) }
     </div>;
 };

components/REPL/REPLInput.tsx

@@ -1,9 +1,14 @@
 import type { NextPage } from "next";
-import React from "react";
+import React, { MutableRefObject } from "react";
 import { commandCompletion, executeCommand } from "../../lib/commands";
 import styles from "../../styles/REPL/REPLInput.module.css";
 
-const REPLInput: NextPage<{historyCallback: CallableFunction}> = ({historyCallback}) => {
+interface REPLInputParams {
+    historyCallback: CallableFunction; 
+    inputRef: MutableRefObject<HTMLInputElement|undefined>;
+}
+
+const REPLInput: NextPage<REPLInputParams> = ({historyCallback, inputRef}) => {
     const typed = React.createRef<HTMLSpanElement>();
     const completion = React.createRef<HTMLSpanElement>();
     const [currentCmd, setCurrentCmd] = React.useState<string[]>([]);
@@ -41,7 +46,7 @@ const REPLInput: NextPage<{historyCallback: CallableFunction}> = ({historyCallba
     return <div className={styles.wrapperwrapper}>
         <span className={styles.inputstart}>$&nbsp;</span>
         <div className={styles.wrapper}>
-            <input className={styles.in} type={"text"} onChange={replinOnChange} onKeyDown={tabComplete} spellCheck={"false"} autoFocus />
+            <input ref={inputRef as MutableRefObject<HTMLInputElement>} className={styles.in} type={"text"} onChange={replinOnChange} onKeyDown={tabComplete} spellCheck={"false"} autoFocus />
             <span className={styles.completionWrapper}><span ref={typed} className={styles.typed}></span><span ref={completion} className={styles.completion}></span></span>
         </div>
     </div>;

components/REPL/index.tsx

@@ -1,14 +1,15 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import REPLInput from "./REPLInput";
 import REPLHistory from "./REPLHistory";
 
 const REPL = () => {
     const [history, manipulateHistory] = useState<string[]>([]);
+    const inputRef = useRef<HTMLInputElement>();
     const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000));
 
     return (<>
-        <REPLHistory history={history} />
-        <REPLInput historyCallback={onCommandExecuted} />
+        <REPLHistory history={history} inputRef={inputRef} />
+        <REPLInput historyCallback={onCommandExecuted} inputRef={inputRef} />
     </>);
 };