From b649f072879ef46887d3933ea18f4714fa80a9b2 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Thu, 27 Mar 2025 15:50:30 +0100
Subject: [PATCH] Config UI: trim string values (#20169)

---
 assets/js/components/Config/JsonModal.vue | 12 +++++++++++-
 tests/config-mqtt.spec.js                 |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/assets/js/components/Config/JsonModal.vue b/assets/js/components/Config/JsonModal.vue
index fe51a507d..82d9af692 100644
--- a/assets/js/components/Config/JsonModal.vue
+++ b/assets/js/components/Config/JsonModal.vue
@@ -125,7 +125,8 @@ export default {
 			this.saving = true;
 			this.error = "";
 			try {
-				const res = await api[this.saveMethod](this.endpoint, this.values, {
+				const values = this.trimValues(this.values);
+				const res = await api[this.saveMethod](this.endpoint, values, {
 					validateStatus: (code) => [200, 202, 400].includes(code),
 				});
 				if (res.status === 200 || res.status === 202) {
@@ -159,6 +160,15 @@ export default {
 			}
 			this.removing = false;
 		},
+		trimValues(values) {
+			// extend to recursive when needed in the future
+			return Object.fromEntries(
+				Object.entries(values).map(([key, value]) => [
+					key,
+					typeof value === "string" ? value.trim() : value,
+				])
+			);
+		},
 	},
 };
 </script>
diff --git a/tests/config-mqtt.spec.js b/tests/config-mqtt.spec.js
index abec62f54..98f169293 100644
--- a/tests/config-mqtt.spec.js
+++ b/tests/config-mqtt.spec.js
@@ -27,7 +27,7 @@ test.describe("mqtt", async () => {
     const modal = await page.getByTestId("mqtt-modal");
 
     await modal.getByLabel("Broker").fill("unknown.example.org");
-    await modal.getByLabel("Topic").fill("my-topic");
+    await modal.getByLabel("Topic").fill("  my-topic "); // whitespace should be trimmed
     await modal.getByLabel("Client ID").fill("my-client-id");
 
     await page.getByRole("button", { name: "Save" }).click();