From 02ccda197c1853fb8e6b9c3186d1404eaa691f62 Mon Sep 17 00:00:00 2001
From: Snarling <84951833+Snarling@users.noreply.github.com>
Date: Mon, 18 Apr 2022 07:41:09 -0400
Subject: [PATCH] WIP

---
 src/Terminal/ui/TerminalInput.tsx | 74 ++++++++++++++-----------------
 1 file changed, 33 insertions(+), 41 deletions(-)

diff --git a/src/Terminal/ui/TerminalInput.tsx b/src/Terminal/ui/TerminalInput.tsx
index afaf7604b..7866147d3 100644
--- a/src/Terminal/ui/TerminalInput.tsx
+++ b/src/Terminal/ui/TerminalInput.tsx
@@ -4,7 +4,7 @@ import { Theme } from "@mui/material/styles";
 import makeStyles from "@mui/styles/makeStyles";
 import createStyles from "@mui/styles/createStyles";
 import TextField from "@mui/material/TextField";
-import Tooltip from "@mui/material/Tooltip";
+import Popper from "@mui/material/Popper";
 
 import { KEY } from "../../utils/helpers/keyCodes";
 import { ITerminal } from "../ITerminal";
@@ -376,46 +376,38 @@ export function TerminalInput({ terminal, router, player }: IProps): React.React
 
   return (
     <>
-      <Tooltip
-        title={
-          possibilities.length > 0 ? (
-            <>
-              <Typography classes={{ root: classes.preformatted }} color={"primary"} paragraph={false}>
-                Possible autocomplete candidate:
-              </Typography>
-              <Typography classes={{ root: classes.preformatted }} color={"primary"} paragraph={false}>
-                {possibilities.join(" ")}
-              </Typography>
-            </>
-          ) : (
-            ""
-          )
-        }
-      >
-        <TextField
-          fullWidth
-          color={terminal.action === null ? "primary" : "secondary"}
-          autoFocus
-          disabled={terminal.action !== null}
-          autoComplete="off"
-          value={value}
-          classes={{ root: classes.textfield }}
-          onChange={handleValueChange}
-          inputRef={terminalInput}
-          InputProps={{
-            // for players to hook in
-            id: "terminal-input",
-            className: classes.input,
-            startAdornment: (
-              <Typography color={terminal.action === null ? "primary" : "secondary"} flexShrink={0}>
-                [{player.getCurrentServer().hostname}&nbsp;~{terminal.cwd()}]&gt;&nbsp;
-              </Typography>
-            ),
-            spellCheck: false,
-            onKeyDown: onKeyDown,
-          }}
-        ></TextField>
-      </Tooltip>
+      <TextField
+        fullWidth
+        color={terminal.action === null ? "primary" : "secondary"}
+        autoFocus
+        disabled={terminal.action !== null}
+        autoComplete="off"
+        value={value}
+        classes={{ root: classes.textfield }}
+        onChange={handleValueChange}
+        inputRef={terminalInput}
+        InputProps={{
+          // for players to hook in
+          id: "terminal-input",
+          className: classes.input,
+          startAdornment: (
+            <Typography color={terminal.action === null ? "primary" : "secondary"} flexShrink={0}>
+              [{player.getCurrentServer().hostname}&nbsp;~{terminal.cwd()}]&gt;&nbsp;
+            </Typography>
+          ),
+          spellCheck: false,
+          onBlur: ()=>setPossibilities([]),
+          onKeyDown: onKeyDown,
+        }}
+      ></TextField>
+      <Popper open={possibilities.length > 0} anchorEl={terminalInput.current} placement={"top-end"}>
+        <Typography classes={{ root: classes.preformatted }} color={"primary"} paragraph={false}>
+          Possible autocomplete candidate:
+        </Typography>
+        <Typography classes={{ root: classes.preformatted }} color={"primary"} paragraph={false}>
+          {possibilities.join(" ")}
+        </Typography>
+      </Popper>
     </>
   );
 }