fix settings unfocusing on every key stroke

src/GameOptions/ui/GameOptionsPage.tsx

@@ -1,9 +1,8 @@
-import { List, ListItem, Paper, Typography } from "@mui/material";
+import { List, Paper, Typography } from "@mui/material";
-import { uniqueId } from "lodash";
 import React from "react";
 
 interface IProps {
-  children: React.ReactElement | (React.ReactElement | null)[];
+  children: React.ReactNode;
   title: string;
 }
 
@@ -11,19 +10,7 @@ export const GameOptionsPage = (props: IProps): React.ReactElement => {
   return (
     <Paper sx={{ height: "fit-content", p: 1 }}>
       <Typography variant="h6">{props.title}</Typography>
-      {(props.children as any)?.length > 1 ? (
+      {props.children}
-        <List disablePadding dense>
-          {(props.children as React.ReactElement[])
-            .filter((c) => c)
-            .map((c, i) => (
-              <ListItem key={uniqueId(String(i))} sx={{ px: 0, display: "block" }}>
-                {c}
-              </ListItem>
-            ))}
-        </List>
-      ) : (
-        props.children
-      )}
     </Paper>
   );
 };

src/GameOptions/ui/GameOptionsRoot.tsx

@@ -28,7 +28,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
       <Box sx={{ display: "grid", gridTemplateColumns: "1fr 3fr", gap: 1 }}>
         <GameOptionsSidebar
           tab={currentTab}
-          setTab={(tab: GameOptionsTab) => setCurrentTab(tab)}
+          setTab={setCurrentTab}
           player={props.player}
           router={props.router}
           save={props.save}

src/GameOptions/ui/InterfacePage.tsx

@@ -58,6 +58,7 @@ export const InterfacePage = (): React.ReactElement => {
         }
       >
         <TextField
+          key={"timestampFormat"}
           InputProps={{
             startAdornment: (
               <Typography

src/GameOptions/ui/MiscPage.tsx

@@ -18,6 +18,7 @@ export const MiscPage = (): React.ReactElement => {
           </>
         }
       />
+      <br />
       <OptionSwitch
         checked={Settings.EnableBashHotkeys}
         onChange={(newValue) => (Settings.EnableBashHotkeys = newValue)}

src/GameOptions/ui/RemoteAPIPage.tsx

@@ -34,6 +34,7 @@ export const RemoteAPIPage = (): React.ReactElement => {
         }
       >
         <TextField
+          key={"remoteAPIPort"}
           InputProps={{
             startAdornment: (
               <Typography color={remoteFileApiPort > 0 && remoteFileApiPort <= 65535 ? "success" : "error"}>

src/ui/React/OptionSwitch.tsx

@@ -18,6 +18,7 @@ export function OptionSwitch({ checked, onChange, text, tooltip }: IProps): Reac
   useEffect(() => onChange(value), [value]);
 
   return (
+    <>
       <FormControlLabel
         control={<Switch checked={value} onChange={handleSwitchChange} />}
         label={
@@ -26,5 +27,7 @@ export function OptionSwitch({ checked, onChange, text, tooltip }: IProps): Reac
           </Tooltip>
         }
       />
+      <br />
+    </>
   );
 }