Ensure gr.Dropdown can have an empty initial value (#7431)

* ensure dropdown can have empty value * add changeset * add changeset * Add story * add changeset --------- Co-authored-by: gradio-pr-bot <[email protected]>
gradio-app · Feb 15, 2024 · 6b8a7e5 · 6b8a7e5
1 parent 89450c6
commit 6b8a7e5
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 4 deletions.
diff --git a/.changeset/major-years-burn.md b/.changeset/major-years-burn.md
@@ -0,0 +1,6 @@
+---
+"@gradio/dropdown": patch
+"gradio": patch
+---
+
+fix:Ensure `gr.Dropdown` can have an empty initial value
diff --git a/js/dropdown/Dropdown.stories.svelte b/js/dropdown/Dropdown.stories.svelte
@@ -45,3 +45,16 @@
 		label: "Single-select Dropdown"
 	}}
 />
+
+<Story
+	name="Empty initial value"
+	args={{
+		interactive: true,
+		choices: [
+			["run", "run"],
+			["swim", "swim"],
+			["jump", "jump"]
+		],
+		label: "Empty Dropdown"
+	}}
+/>
diff --git a/js/dropdown/Index.svelte b/js/dropdown/Index.svelte
@@ -17,7 +17,7 @@
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let value: string | string[];
+	export let value: string | string[] | undefined = undefined;
 	export let value_is_output = false;
 	export let multiselect = false;
 	export let max_choices: number | null = null;

diff --git a/js/dropdown/dropdown.test.ts b/js/dropdown/dropdown.test.ts
@@ -442,4 +442,25 @@ describe("Dropdown", () => {
 		await item.blur();
 		await expect(item.value).toBe("apple_new_choice");
 	});
+
+	test("ensure dropdown can have an empty value", async () => {
+		const { getByLabelText } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			allow_custom_value: false,
+			label: "Dropdown",
+			choices: [
+				["apple_choice", "apple_internal_value"],
+				["zebra_choice", "zebra_internal_value"]
+			],
+			filterable: true,
+			interactive: true
+		});
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		await expect(item.value).toBe("");
+	});
 });
diff --git a/js/dropdown/shared/Dropdown.svelte b/js/dropdown/shared/Dropdown.svelte
@@ -8,9 +8,8 @@
 
 	export let label: string;
 	export let info: string | undefined = undefined;
-	export let value: string | number | (string | number)[] | undefined =
-		undefined;
-	let old_value: string | number | (string | number)[] | undefined = undefined;
+	export let value: string | number | (string | number)[] | undefined = [];
+	let old_value: string | number | (string | number)[] | undefined = [];
 	export let value_is_output = false;
 	export let choices: [string, string | number][];
 	let old_choices: [string, string | number][];