From a24579420aceb5c16ba264b0a6e4e4ae8f725394 Mon Sep 17 00:00:00 2001
From: Bastian Meissner <meissner.bastian@gmail.com>
Date: Fri, 26 Nov 2021 21:06:15 +0100
Subject: [PATCH] Remove "selected" from select.tsx

---
 src/components/select.tsx   | 89 ++++++++++++++++++++-----------------
 src/components/settings.tsx |  4 +-
 2 files changed, 50 insertions(+), 43 deletions(-)

diff --git a/src/components/select.tsx b/src/components/select.tsx
index 2dd1c2e..5c6d77e 100644
--- a/src/components/select.tsx
+++ b/src/components/select.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 
 export interface IItemProps {
@@ -19,51 +19,58 @@ const List = styled.select`
   padding: 0.5rem;
 `;
 
-const update = (
-  items: Array<IItemProps>,
-  onChange: (item: any) => void,
-  e: React.ChangeEvent<HTMLSelectElement>,
-) => {
-  onChange(items.find((item) => item.value.toString() === e.target.value));
-};
-
 const Select = ({
   items,
   onChange,
   current,
   className,
   testId,
-}: ISelectProps) => (
-  <List
-    data-testid={"select" + (testId ? "-" + testId : "")}
-    onChange={(e) => update(items, onChange, e)}
-    className={className}
-  >
-    {items.map(({ label, value }, index) => {
-      if (label === current) {
-        return (
-          <option
-            data-testid={"option-" + (testId ? testId + "-" : "") + index}
-            key={[label, index].join("")}
-            value={value.toString()}
-            selected
-          >
-            {label}
-          </option>
-        );
-      } else {
-        return (
-          <option
-            data-testid={"option-" + (testId ? testId + "-" : "") + index}
-            key={[label, index].join("")}
-            value={value.toString()}
-          >
-            {label}
-          </option>
-        );
-      }
-    })}
-  </List>
-);
+}: ISelectProps) => {
+  const [selected, setSelected] = useState<string | undefined>(current);
+
+  const update = (
+    items: Array<IItemProps>,
+    onChange: (item: any) => void,
+    event: React.ChangeEvent<HTMLSelectElement>,
+  ) => {
+    setSelected(event.target.value);
+    onChange(
+      items.find((item) => item.value.toString() === event.target.value),
+    );
+  };
+
+  return (
+    <List
+      data-testid={"select" + (testId ? `-${testId}` : "")}
+      onChange={(e) => update(items, onChange, e)}
+      className={className}
+      value={selected}
+    >
+      {items.map(({ label, value }, index) => {
+        if (label === current) {
+          return (
+            <option
+              data-testid={"option-" + (testId ? `${testId}-` : "") + index}
+              key={[label, index].join("")}
+              value={value.toString()}
+            >
+              {label}
+            </option>
+          );
+        } else {
+          return (
+            <option
+              data-testid={"option-" + (testId ? `${testId}-` : "") + index}
+              key={[label, index].join("")}
+              value={value.toString()}
+            >
+              {label}
+            </option>
+          );
+        }
+      })}
+    </List>
+  );
+};
 
 export default Select;
diff --git a/src/components/settings.tsx b/src/components/settings.tsx
index 72faa12..58845af 100644
--- a/src/components/settings.tsx
+++ b/src/components/settings.tsx
@@ -101,8 +101,8 @@ const Settings = ({ themes, search }: ISettingsProps) => {
   const [newLightTheme, setNewLightTheme] = useState<IThemeProps>();
   const [newDarkTheme, setNewDarkTheme] = useState<IThemeProps>();
 
-  const currentLightTheme = getTheme("light").label;
-  const currentDarkTheme = getTheme("dark").label;
+  const currentLightTheme = getTheme("light").value;
+  const currentDarkTheme = getTheme("dark").value;
 
   if (themes || search) {
     return (