From 74a5124b2427526b6cabd6c4371a6ec8eccaa699 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 1 Oct 2024 21:50:37 +0200
Subject: [PATCH] fix(ui): make `CoreSwitchInput` reactive to state change.
 WF-81

---
 .../components/core/input/CoreSwitchInput.vue    | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/src/ui/src/components/core/input/CoreSwitchInput.vue b/src/ui/src/components/core/input/CoreSwitchInput.vue
index 0ab7f23a6..60b6f72c6 100644
--- a/src/ui/src/components/core/input/CoreSwitchInput.vue
+++ b/src/ui/src/components/core/input/CoreSwitchInput.vue
@@ -7,10 +7,10 @@
 	>
 		<div
 			class="switch"
-			:class="{ on: toggleValue }"
+			:class="{ on: !!formValue }"
 			tabindex="0"
 			role="switch"
-			:aria-checked="toggleValue"
+			:aria-checked="!!formValue"
 			@click="handleToggle"
 			@keydown.enter.space.prevent="handleToggle"
 		>
@@ -29,7 +29,6 @@ import {
 	separatorColor,
 	cssClasses,
 } from "@/renderer/sharedStyleFields";
-import { onMounted } from "vue";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 
@@ -82,25 +81,16 @@ const { formValue, handleInput } = useFormValueBroker(
 	instancePath,
 	rootInstance,
 );
-const toggleValue = ref(false);
 
 function handleToggle() {
-	toggleValue.value = !toggleValue.value;
-	handleInput(toggleValue.value, "wf-toggle");
+	handleInput(!formValue.value, "wf-toggle");
 }
-
-onMounted(() => {
-	toggleValue.value = !!formValue.value;
-});
 </script>
 
 <style scoped>
 @import "@/renderer/sharedStyles.css";
 @import "@/renderer/colorTransformations.css";
 
-.CoreSwitchInput {
-}
-
 .switch {
 	background: var(--separatorColor);
 	width: 34px;