From 3fe6a6e19d3ed33c6f9f6fa7633ff63fbcf94554 Mon Sep 17 00:00:00 2001
From: Olivier Gagnon <oli.gagnon4418@gmail.com>
Date: Mon, 29 Aug 2022 16:36:08 -0400
Subject: [PATCH] fix settings unfocusing on every key stroke

---
 src/GameOptions/ui/GameOptionsPage.tsx | 19 +++----------------
 src/GameOptions/ui/GameOptionsRoot.tsx |  2 +-
 src/GameOptions/ui/InterfacePage.tsx   |  1 +
 src/GameOptions/ui/MiscPage.tsx        |  1 +
 src/GameOptions/ui/RemoteAPIPage.tsx   |  1 +
 src/ui/React/OptionSwitch.tsx          | 19 +++++++++++--------
 6 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/src/GameOptions/ui/GameOptionsPage.tsx b/src/GameOptions/ui/GameOptionsPage.tsx
index a8b5e4afa..793fb7abb 100644
--- a/src/GameOptions/ui/GameOptionsPage.tsx
+++ b/src/GameOptions/ui/GameOptionsPage.tsx
@@ -1,9 +1,8 @@
-import { List, ListItem, Paper, Typography } from "@mui/material";
-import { uniqueId } from "lodash";
+import { List, Paper, Typography } from "@mui/material";
 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 ? (
-        <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
-      )}
+      {props.children}
     </Paper>
   );
 };
diff --git a/src/GameOptions/ui/GameOptionsRoot.tsx b/src/GameOptions/ui/GameOptionsRoot.tsx
index da78eae2c..49eeed0f0 100644
--- a/src/GameOptions/ui/GameOptionsRoot.tsx
+++ b/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}
diff --git a/src/GameOptions/ui/InterfacePage.tsx b/src/GameOptions/ui/InterfacePage.tsx
index 5af2e79e3..e37aebf22 100644
--- a/src/GameOptions/ui/InterfacePage.tsx
+++ b/src/GameOptions/ui/InterfacePage.tsx
@@ -58,6 +58,7 @@ export const InterfacePage = (): React.ReactElement => {
         }
       >
         <TextField
+          key={"timestampFormat"}
           InputProps={{
             startAdornment: (
               <Typography
diff --git a/src/GameOptions/ui/MiscPage.tsx b/src/GameOptions/ui/MiscPage.tsx
index 8a4b14789..28af7894b 100644
--- a/src/GameOptions/ui/MiscPage.tsx
+++ b/src/GameOptions/ui/MiscPage.tsx
@@ -18,6 +18,7 @@ export const MiscPage = (): React.ReactElement => {
           </>
         }
       />
+      <br />
       <OptionSwitch
         checked={Settings.EnableBashHotkeys}
         onChange={(newValue) => (Settings.EnableBashHotkeys = newValue)}
diff --git a/src/GameOptions/ui/RemoteAPIPage.tsx b/src/GameOptions/ui/RemoteAPIPage.tsx
index 0f00ddb30..0441397c8 100644
--- a/src/GameOptions/ui/RemoteAPIPage.tsx
+++ b/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"}>
diff --git a/src/ui/React/OptionSwitch.tsx b/src/ui/React/OptionSwitch.tsx
index 5b6f8f364..a7cbf6028 100644
--- a/src/ui/React/OptionSwitch.tsx
+++ b/src/ui/React/OptionSwitch.tsx
@@ -18,13 +18,16 @@ export function OptionSwitch({ checked, onChange, text, tooltip }: IProps): Reac
   useEffect(() => onChange(value), [value]);
 
   return (
-    <FormControlLabel
-      control={<Switch checked={value} onChange={handleSwitchChange} />}
-      label={
-        <Tooltip title={<Typography>{tooltip}</Typography>}>
-          <Typography>{text}</Typography>
-        </Tooltip>
-      }
-    />
+    <>
+      <FormControlLabel
+        control={<Switch checked={value} onChange={handleSwitchChange} />}
+        label={
+          <Tooltip title={<Typography>{tooltip}</Typography>}>
+            <Typography>{text}</Typography>
+          </Tooltip>
+        }
+      />
+      <br />
+    </>
   );
 }