DEVMENU: Use Autocomplete instead of Select in more tools (#1631)

src/DevMenu/ui/FactionsDev.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import {
   Accordion,
   AccordionSummary,
@@ -6,14 +6,12 @@ import {
   Button,
   FormControl,
   FormControlLabel,
-  IconButton,
-  InputLabel,
-  MenuItem,
-  Select,
-  SelectChangeEvent,
   Typography,
   RadioGroup,
   Radio,
+  Box,
+  Autocomplete,
+  TextField,
 } from "@mui/material";
 import Tooltip from "@mui/material/Tooltip";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
@@ -35,13 +33,11 @@ const largeAmountOfReputation = 1e12;
 
 export function FactionsDev(): React.ReactElement {
   const [selectedFaction, setSelectedFaction] = useState(Factions[FactionName.Illuminati]);
+  const factions = useMemo(() => {
+    return getRecordValues(Factions).map((faction) => faction.name);
+  }, []);
   const rerender = useRerender();
 
-  function setFactionDropdown(event: SelectChangeEvent): void {
-    if (!getEnumHelper("FactionName").isMember(event.target.value)) return;
-    setSelectedFaction(Factions[event.target.value]);
-  }
-
   function receiveInvite(): void {
     Player.receiveInvite(selectedFaction.name);
     selectedFaction.alreadyInvited = true;
@@ -139,35 +135,30 @@ export function FactionsDev(): React.ReactElement {
                 <Typography>Faction:</Typography>
               </td>
               <td>
-                <FormControl>
-                  <InputLabel id="factions-select">Faction</InputLabel>
-                  <Select
-                    labelId="factions-select"
-                    id="factions-dropdown"
-                    onChange={setFactionDropdown}
+                <Box display="flex">
+                  <Tooltip title={`Hear rumor about ${selectedFaction.name}`}>
+                    <Button onClick={receiveRumor} size="large">
+                      <ChatIcon />
+                    </Button>
+                  </Tooltip>
+                  <Tooltip title={`Receive invitation to ${selectedFaction.name}`}>
+                    <Button onClick={receiveInvite} size="large">
+                      <ReplyIcon />
+                    </Button>
+                  </Tooltip>
+                  <Autocomplete
+                    style={{ marginLeft: "8px", width: "350px" }}
+                    options={factions}
                     value={selectedFaction.name}
-                    startAdornment={
-                      <>
-                        <Tooltip title={`Hear rumor about ${selectedFaction.name}`}>
-                          <IconButton onClick={receiveRumor} size="large">
-                            <ChatIcon />
-                          </IconButton>
-                        </Tooltip>
-                        <Tooltip title={`Receive invitation to ${selectedFaction.name}`}>
-                          <IconButton onClick={receiveInvite} size="large">
-                            <ReplyIcon />
-                          </IconButton>
-                        </Tooltip>
-                      </>
-                    }
-                  >
-                    {getRecordValues(Factions).map((faction) => (
-                      <MenuItem key={faction.name} value={faction.name}>
-                        {faction.name}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
+                    renderInput={(params) => <TextField {...params} style={{ height: "100%" }} />}
+                    onChange={(_, factionName) => {
+                      if (!factionName || !getEnumHelper("FactionName").isMember(factionName)) {
+                        return;
+                      }
+                      setSelectedFaction(Factions[factionName]);
+                    }}
+                  ></Autocomplete>
+                </Box>
               </td>
             </tr>
             <tr>