From 3fe73a40ea1c84c957f8de7cb7890101a7b1ed76 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Mon, 24 Nov 2025 07:12:22 +0100
Subject: [PATCH] Add live input handling for episode search

---
 src/ui/PodcastView/EpisodeList.svelte |  2 +-
 src/ui/obsidian/Text.svelte           | 33 +++++++++++++++++++++++----
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/ui/PodcastView/EpisodeList.svelte b/src/ui/PodcastView/EpisodeList.svelte
index 3fa7312..3ab93ad 100644
--- a/src/ui/PodcastView/EpisodeList.svelte
+++ b/src/ui/PodcastView/EpisodeList.svelte
@@ -40,7 +40,7 @@
 			<div class="episode-list-search">
 				<Text
 					bind:value={searchInputQuery}
-					on:change={forwardSearchInput}
+					on:input={forwardSearchInput}
 					placeholder="Search episodes"
 					style={{
 						width: "100%",
diff --git a/src/ui/obsidian/Text.svelte b/src/ui/obsidian/Text.svelte
index ecd4bbb..b12c599 100644
--- a/src/ui/obsidian/Text.svelte
+++ b/src/ui/obsidian/Text.svelte
@@ -2,7 +2,7 @@
     import { TextComponent } from "obsidian";
     import type { CSSObject } from "src/types/CSSObject";
     import extractStylesFromObj from "src/utility/extractStylesFromObj";
-    import { afterUpdate, createEventDispatcher, onMount } from "svelte";
+    import { afterUpdate, createEventDispatcher, onDestroy, onMount } from "svelte";
 
     export let value: string = "";
     export let disabled: boolean = false;
@@ -17,6 +17,7 @@
 
     let text: TextComponent;
     let styles: CSSObject = {};
+    let listenersAttached = false;
 
     onMount(() => {
         text = new TextComponent(textRef);
@@ -28,6 +29,31 @@
         updateTextComponentAttributes(text);
     });
 
+    onDestroy(() => {
+        text?.inputEl?.removeEventListener("input", handleInput);
+    });
+
+    function handleInput(event: Event) {
+        const input = event.target as HTMLInputElement | null;
+        const newValue = input?.value ?? "";
+
+        value = newValue;
+        dispatch("input", { value: newValue });
+    }
+
+    function handleChange(newValue: string) {
+        value = newValue;
+        dispatch("change", { value: newValue });
+    }
+
+    function attachEventListeners(component: TextComponent) {
+        if (!component?.inputEl || listenersAttached) return;
+
+        component.onChange(handleChange);
+        component.inputEl.addEventListener("input", handleInput);
+        listenersAttached = true;
+    }
+
     function updateTextComponentAttributes(component: TextComponent) {
         if (value !== undefined) component.setValue(value);
         if (disabled) component.setDisabled(disabled);
@@ -40,10 +66,7 @@
             el = component.inputEl;
         }
 
-        component.onChange((newValue: string) => {
-            value = newValue;
-            dispatch("change", { value: newValue });
-        });
+        attachEventListeners(component);
     }
 </script>