From e0d1ee4cf71eb8cbbdc2d84dafd33ad7dd07d7a9 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Sat, 19 Apr 2025 13:33:48 +0200
Subject: [PATCH] fix(settings): fix dropdown not rendered correctly (@fehmer)
 (#6468)

Dropdowns for layoutfluid and polyglot were not rendered correctly after
logout/login
---
 frontend/src/ts/commandline/lists.ts |  4 +-
 frontend/src/ts/pages/settings.ts    | 61 ++++++++++++----------------
 2 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/frontend/src/ts/commandline/lists.ts b/frontend/src/ts/commandline/lists.ts
index a3ff34523..8ab239f23 100644
--- a/frontend/src/ts/commandline/lists.ts
+++ b/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, "#"));
       },
     },
     {
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index 909ef1f1b..10e7b017a 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/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