diff --git a/src/ui/obsidian/Slider.svelte b/src/ui/obsidian/Slider.svelte index f0413ae..6595534 100644 --- a/src/ui/obsidian/Slider.svelte +++ b/src/ui/obsidian/Slider.svelte @@ -15,6 +15,7 @@ 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. @@ -22,6 +23,8 @@ 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); diff --git a/src/ui/obsidian/Text.svelte b/src/ui/obsidian/Text.svelte index 4c9a679..d30dec5 100644 --- a/src/ui/obsidian/Text.svelte +++ b/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; } }