fix: guard obsidian inputs from feedback loops (#154)

Author: chhoumann

src/ui/obsidian/Slider.svelte

@@ -15,13 +15,16 @@
     let slider: SliderComponent;
     let styles: CSSObject = {};
     let changeHandler: ((event: Event) => void) | null = null;
+    let isProgrammaticUpdate = false;
 
     // This is not a complete implementation. I implemented what I needed.
 
     onMount(() => {
         slider = new SliderComponent(sliderRef);
 
         changeHandler = (event: Event) => {
+            if (isProgrammaticUpdate) return;
+
             const newValue = Number((event.target as HTMLInputElement).value);
             dispatch("change", { value: newValue });
         };
@@ -45,7 +48,16 @@
         currentLimits: [min: number, max: number] | [min: number, max: number, step: number],
         currentStyles: CSSObject
     ) {
-        if (currentValue !== undefined) sldr.setValue(currentValue);
+        const sliderValue =
+            typeof sldr.getValue === "function"
+                ? sldr.getValue()
+                : Number(sldr.sliderEl?.value);
+
+        if (currentValue !== undefined && sliderValue !== currentValue) {
+            isProgrammaticUpdate = true;
+            sldr.setValue(currentValue);
+            isProgrammaticUpdate = false;
+        }
         if (currentLimits) {
             if (currentLimits.length === 2) {
                 sldr.setLimits(currentLimits[0], currentLimits[1], 1);

src/ui/obsidian/Text.svelte

@@ -19,6 +19,7 @@
     let styles: CSSObject = {};
     let inputHandler: ((event: Event) => void) | null = null;
     let changeHandler: ((value: string) => void) | null = null;
+    let isProgrammaticUpdate = false;
 
     onMount(() => {
         text = new TextComponent(textRef);
@@ -36,6 +37,8 @@
     }
 
     function handleInput(event: Event) {
+        if (isProgrammaticUpdate) return;
+
         const input = event.target as HTMLInputElement | null;
         const newValue = input?.value ?? "";
 
@@ -44,6 +47,8 @@
     }
 
     function handleChange(newValue: string) {
+        if (isProgrammaticUpdate) return;
+
         value = newValue;
         dispatch("change", { value: newValue });
     }
@@ -66,14 +71,40 @@
         currentType: "text" | "password" | "email" | "number" | "tel" | "url",
         currentStyles: CSSObject
     ) {
-        if (currentValue !== undefined) component.setValue(currentValue);
-        if (isDisabled) component.setDisabled(isDisabled);
-        if (currentPlaceholder) component.setPlaceholder(currentPlaceholder);
-        if (currentType) component.inputEl.type = currentType;
-        if (currentStyles) {
-            component.inputEl.setAttr("style", extractStylesFromObj(currentStyles));
+        const componentValue =
+            typeof component.getValue === "function"
+                ? component.getValue()
+                : component.inputEl?.value;
+
+        if (currentValue !== undefined && componentValue !== currentValue) {
+            isProgrammaticUpdate = true;
+            component.setValue(currentValue);
+            isProgrammaticUpdate = false;
         }
+
         if (component?.inputEl) {
+            if (component.inputEl.disabled !== isDisabled) {
+                component.setDisabled(isDisabled);
+            }
+
+            if (
+                currentPlaceholder &&
+                component.inputEl.placeholder !== currentPlaceholder
+            ) {
+                component.setPlaceholder(currentPlaceholder);
+            }
+
+            if (component.inputEl.type !== currentType) {
+                component.inputEl.type = currentType;
+            }
+
+            if (currentStyles) {
+                component.inputEl.setAttr(
+                    "style",
+                    extractStylesFromObj(currentStyles),
+                );
+            }
+
             el = component.inputEl;
         }
     }