Merge pull request #3493 from Snarling/autocompleteFix

UI: FIX #3457 autocomplete suggestions no longer require hovering terminal input
This commit is contained in:
hydroflame
2022-04-18 11:01:19 -04:00
committed by GitHub

View File

@@ -3,8 +3,9 @@ import Typography from "@mui/material/Typography";
import { Theme } from "@mui/material/styles"; import { Theme } from "@mui/material/styles";
import makeStyles from "@mui/styles/makeStyles"; import makeStyles from "@mui/styles/makeStyles";
import createStyles from "@mui/styles/createStyles"; import createStyles from "@mui/styles/createStyles";
import Paper from "@mui/material/Paper";
import Popper from "@mui/material/Popper";
import TextField from "@mui/material/TextField"; import TextField from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
import { KEY } from "../../utils/helpers/keyCodes"; import { KEY } from "../../utils/helpers/keyCodes";
import { ITerminal } from "../ITerminal"; import { ITerminal } from "../ITerminal";
@@ -376,46 +377,40 @@ export function TerminalInput({ terminal, router, player }: IProps): React.React
return ( return (
<> <>
<Tooltip <TextField
title={ fullWidth
possibilities.length > 0 ? ( color={terminal.action === null ? "primary" : "secondary"}
<> autoFocus
<Typography classes={{ root: classes.preformatted }} color={"primary"} paragraph={false}> disabled={terminal.action !== null}
Possible autocomplete candidate: autoComplete="off"
</Typography> value={value}
<Typography classes={{ root: classes.preformatted }} color={"primary"} paragraph={false}> classes={{ root: classes.textfield }}
{possibilities.join(" ")} onChange={handleValueChange}
</Typography> inputRef={terminalInput}
</> InputProps={{
) : ( // for players to hook in
"" id: "terminal-input",
) className: classes.input,
} startAdornment: (
> <Typography color={terminal.action === null ? "primary" : "secondary"} flexShrink={0}>
<TextField [{player.getCurrentServer().hostname}&nbsp;~{terminal.cwd()}]&gt;&nbsp;
fullWidth </Typography>
color={terminal.action === null ? "primary" : "secondary"} ),
autoFocus spellCheck: false,
disabled={terminal.action !== null} onBlur: () => setPossibilities([]),
autoComplete="off" onKeyDown: onKeyDown,
value={value} }}
classes={{ root: classes.textfield }} ></TextField>
onChange={handleValueChange} <Popper open={possibilities.length > 0} anchorEl={terminalInput.current} placement={"top-end"}>
inputRef={terminalInput} <Paper sx={{ m: 1, p: 2 }}>
InputProps={{ <Typography classes={{ root: classes.preformatted }} color={"primary"} paragraph={false}>
// for players to hook in Possible autocomplete candidates:
id: "terminal-input", </Typography>
className: classes.input, <Typography classes={{ root: classes.preformatted }} color={"primary"} paragraph={false}>
startAdornment: ( {possibilities.join(" ")}
<Typography color={terminal.action === null ? "primary" : "secondary"} flexShrink={0}> </Typography>
[{player.getCurrentServer().hostname}&nbsp;~{terminal.cwd()}]&gt;&nbsp; </Paper>
</Typography> </Popper>
),
spellCheck: false,
onKeyDown: onKeyDown,
}}
></TextField>
</Tooltip>
</> </>
); );
} }