fix(settings): fix dropdown not rendered correctly (@fehmer) (monkeytypegame#6468)

Dropdowns for layoutfluid and polyglot were not rendered correctly after
logout/login

Author: fehmer

frontend/src/ts/commandline/lists.ts

@@ -219,13 +219,13 @@ export const commands: CommandsSubgroup = {
       id: "changeCustomLayoutfluid",
       display: "Custom layoutfluid...",
       defaultValue: (): string => {
-        return Config.customLayoutfluid;
+        return Config.customLayoutfluid.replace(/#/g, " ");
       },
       input: true,
       icon: "fa-tint",
       exec: ({ input }): void => {
         if (input === undefined) return;
-        UpdateConfig.setCustomLayoutfluid(input);
+        UpdateConfig.setCustomLayoutfluid(input.replace(/ /g, "#"));
       },
     },
     {

frontend/src/ts/pages/settings.ts

@@ -679,45 +679,34 @@ async function fillSettingsPage(): Promise<void> {
     Config.keymapSize
   );
 
-  if (customLayoutFluidSelect === undefined) {
-    const customLayoutfluidElement = document.querySelector(
-      ".pageSettings .section[data-config-name='customLayoutfluid'] select"
-    ) as Element;
-
-    customLayoutFluidSelect = new SlimSelect({
-      select: customLayoutfluidElement,
-      settings: { keepOrder: true },
-      events: {
-        afterChange: (newVal): void => {
-          const customLayoutfluid = newVal.map((it) => it.value).join("#");
-          if (customLayoutfluid !== Config.customLayoutfluid) {
-            void UpdateConfig.setCustomLayoutfluid(customLayoutfluid);
-          }
-        },
+  customLayoutFluidSelect = new SlimSelect({
+    select:
+      ".pageSettings .section[data-config-name='customLayoutfluid'] select",
+    settings: { keepOrder: true },
+    events: {
+      afterChange: (newVal): void => {
+        const customLayoutfluid = newVal.map((it) => it.value).join("#");
+        if (customLayoutfluid !== Config.customLayoutfluid) {
+          void UpdateConfig.setCustomLayoutfluid(customLayoutfluid);
+        }
       },
-    });
-  }
+    },
+  });
 
-  if (customPolyglotSelect === undefined) {
-    const customPolyglotElement = document.querySelector(
-      ".pageSettings .section[data-config-name='customPolyglot'] select"
-    ) as Element;
-
-    customPolyglotSelect = new SlimSelect({
-      select: customPolyglotElement,
-      data: getLanguageDropdownData(languageGroups ?? [], (language) =>
-        Config.customPolyglot.includes(language)
-      ),
-      events: {
-        afterChange: (newVal): void => {
-          const customPolyglot = newVal.map((it) => it.value);
-          if (customPolyglot.toSorted() !== Config.customPolyglot.toSorted()) {
-            void UpdateConfig.setCustomPolyglot(customPolyglot);
-          }
-        },
+  customPolyglotSelect = new SlimSelect({
+    select: ".pageSettings .section[data-config-name='customPolyglot'] select",
+    data: getLanguageDropdownData(languageGroups ?? [], (language) =>
+      Config.customPolyglot.includes(language)
+    ),
+    events: {
+      afterChange: (newVal): void => {
+        const customPolyglot = newVal.map((it) => it.value);
+        if (customPolyglot.toSorted() !== Config.customPolyglot.toSorted()) {
+          void UpdateConfig.setCustomPolyglot(customPolyglot);
+        }
       },
-    });
-  }
+    },
+  });
 
   $(".pageSettings .section[data-config-name='tapeMargin'] input").val(
     Config.tapeMargin