fix(dropdown): preserve input value when choices update via key_up

.changeset/smart-corners-beam.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dropdown": patch
+"gradio": patch
+---
+
+fix:fix(dropdown): preserve input value when choices update via key_up

js/dropdown/dropdown.test.ts

@@ -520,4 +520,110 @@ describe("Dropdown", () => {
 		) as HTMLInputElement;
 		await expect(item.value).toBe("");
 	});
+
+	test("updating choices while typing should preserve the input text", async () => {
+		const { getByLabelText, set_data } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			value: null,
+			allow_custom_value: true,
+			label: "Dropdown",
+			choices: [],
+			filterable: true,
+			interactive: true
+		});
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		await item.focus();
+		await event.keyboard("ap");
+		expect(item.value).toBe("ap");
+
+		// Simulate backend returning new choices (as in key_up handler)
+		await set_data({
+			choices: [
+				["ap item 1", "ap item 1"],
+				["ap item 2", "ap item 2"],
+				["ap item 3", "ap item 3"]
+			]
+		});
+
+		// Input text should be preserved, not cleared
+		expect(item.value).toBe("ap");
+	});
+
+	test("updating choices while typing should not fire a change event", async () => {
+		const { getByLabelText, listen, set_data } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			value: null,
+			allow_custom_value: true,
+			label: "Dropdown",
+			choices: [],
+			filterable: true,
+			interactive: true
+		});
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+		const change_event = listen("change");
+
+		await item.focus();
+		await event.keyboard("test");
+
+		// Simulate backend returning new choices
+		await set_data({
+			choices: [
+				["test item 1", "test item 1"],
+				["test item 2", "test item 2"]
+			]
+		});
+
+		// No change event should have fired (only choices changed, not value)
+		expect(change_event).not.toHaveBeenCalled();
+	});
+
+	test("updating choices while typing should show updated options", async () => {
+		const { getByLabelText, getAllByTestId, set_data } = await render(
+			Dropdown,
+			{
+				show_label: true,
+				loading_status,
+				value: null,
+				allow_custom_value: true,
+				label: "Dropdown",
+				choices: [
+					["old item 1", "old item 1"],
+					["old item 2", "old item 2"]
+				],
+				filterable: true,
+				interactive: true
+			}
+		);
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		await item.focus();
+		await event.keyboard("new");
+
+		// Simulate backend returning new choices
+		await set_data({
+			choices: [
+				["new item 1", "new item 1"],
+				["new item 2", "new item 2"],
+				["new item 3", "new item 3"]
+			]
+		});
+
+		const options = getAllByTestId("dropdown-option");
+		// All 3 new choices should be shown (they all contain "new")
+		expect(options).toHaveLength(3);
+		// Input text should still be preserved
+		expect(item.value).toBe("new");
+	});
 });

js/dropdown/shared/Dropdown.svelte

@@ -59,8 +59,27 @@
 	let choices_values = $derived(choices.map((c) => c[1]));
 	let input_text = $state("");
 	let selected_index: number | null = $state(null);
+	let is_focused = $state(false);
 
 	$effect(() => {
+		// When the input is focused (user is actively typing), don't reset
+		// input_text just because choices changed. This prevents clearing the
+		// user's typed text during search-as-you-type (key_up) workflows.
+		// We do refresh filtered_indices so newly-returned choices appear.
+		if (is_focused) {
+			filtered_indices = choices.map((_, i) => i);
+			if (
+				value !== undefined &&
+				value !== null &&
+				choices_values.includes(value as string | number)
+			) {
+				selected_index = choices_values.indexOf(
+					value as string | number
+				);
+			}
+			return;
+		}
+
 		if (
 			value === undefined ||
 			value === null ||
@@ -80,6 +99,7 @@
 			selected_index = null;
 		}
 	});
+
 	// Use last_typed_value to track when the user has typed
 	// on_blur we only want to update value if the user has typed
 	let last_typed_value = input_text;
@@ -117,12 +137,14 @@
 	}
 
 	function handle_focus(e: FocusEvent): void {
+		is_focused = true;
 		filtered_indices = choices.map((_, i) => i);
 		show_options = true;
 		on_focus?.();
 	}
 
 	function handle_blur(): void {
+		is_focused = false;
 		if (!allow_custom_value) {
 			input_text =
 				choices_names[choices_values.indexOf(value as string | number)];