Ensure input value saves on dropdown blur (#5525)

* save input on dropdown blur * set input_value * add changeset * add changeset * add changeset * add test * tweak blur logic * remove unused funcs * nit --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
gradio-app · Sep 13, 2023 · 21f1db4 · 21f1db4
1 parent 06bdc62
commit 21f1db4
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 20 deletions.
diff --git a/.changeset/lazy-dogs-walk.md b/.changeset/lazy-dogs-walk.md
@@ -0,0 +1,6 @@
+---
+"@gradio/dropdown": patch
+"gradio": patch
+---
+
+fix:Ensure input value saves on dropdown blur
diff --git a/js/dropdown/dropdown.test.ts b/js/dropdown/dropdown.test.ts
@@ -1,5 +1,5 @@
 import { test, describe, assert, afterEach, vi } from "vitest";
-import { cleanup, fireEvent, render, get_text, wait } from "@gradio/tootils";
+import { cleanup, render } from "@gradio/tootils";
 import event from "@testing-library/user-event";
 import { setupi18n } from "../app/src/i18n";
 
@@ -35,7 +35,8 @@ describe("Dropdown", () => {
 			choices: [
 				["choice", "choice"],
 				["choice2", "choice2"]
-			]
+			],
+			filterable: false
 		});
 
 		const item: HTMLInputElement = getByLabelText(
@@ -54,7 +55,8 @@ describe("Dropdown", () => {
 			choices: [
 				["choice", "choice"],
 				["name2", "choice2"]
-			]
+			],
+			filterable: true
 		});
 
 		const item: HTMLInputElement = getByLabelText(
@@ -80,7 +82,8 @@ describe("Dropdown", () => {
 			choices: [
 				["apple", "apple"],
 				["zebra", "zebra"]
-			]
+			],
+			filterable: true
 		});
 
 		const item: HTMLInputElement = getByLabelText(
@@ -110,7 +113,8 @@ describe("Dropdown", () => {
 			choices: [
 				["default", "default"],
 				["other", "other"]
-			]
+			],
+			filterable: false
 		});
 
 		const item: HTMLInputElement = getByLabelText(
@@ -119,13 +123,36 @@ describe("Dropdown", () => {
 		const change_event = listen("change");
 		const select_event = listen("select");
 
-		await item.focus();
+		item.focus();
 		await event.keyboard("other");
+	});
+
+	test("blurring the textbox should save the input value", async () => {
+		const { getByLabelText, listen } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			value: "default",
+			label: "Dropdown",
+			max_choices: undefined,
+			allow_custom_value: true,
+			choices: [
+				["dwight", "dwight"],
+				["michael", "michael"]
+			],
+			filterable: true
+		});
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+		const change_event = listen("change");
+
+		item.focus();
+		await event.keyboard("kevin");
 		await item.blur();
 
-		assert.equal(item.value, "default");
-		assert.equal(change_event.callCount, 0);
-		assert.equal(select_event.callCount, 0);
+		assert.equal(item.value, "kevin");
+		assert.equal(change_event.callCount, 1);
 	});
 
 	test("focusing the label should toggle the options", async () => {
@@ -137,7 +164,8 @@ describe("Dropdown", () => {
 			choices: [
 				["default", "default"],
 				["other", "other"]
-			]
+			],
+			filterable: true
 		});
 
 		const item: HTMLInputElement = getByLabelText(
@@ -146,8 +174,8 @@ describe("Dropdown", () => {
 		const blur_event = listen("blur");
 		const focus_event = listen("focus");
 
-		await item.focus();
-		await item.blur();
+		item.focus();
+		item.blur();
 
 		assert.equal(blur_event.callCount, 1);
 		assert.equal(focus_event.callCount, 1);
@@ -165,14 +193,15 @@ describe("Dropdown", () => {
 				["apple", "apple"],
 				["zebra", "zebra"],
 				["pony", "pony"]
-			]
+			],
+			filterable: true
 		});
 
 		const item: HTMLInputElement = getByLabelText(
 			"Dropdown"
 		) as HTMLInputElement;
 
-		await item.focus();
+		item.focus();
 		item.value = "";
 		await event.keyboard("z");
 		const options = getAllByTestId("dropdown-option");
@@ -200,7 +229,8 @@ describe("Dropdown", () => {
 					["apple", "apple"],
 					["zebra", "zebra"],
 					["pony", "pony"]
-				]
+				],
+				filterable: true
 			}
 		);
 
@@ -214,7 +244,7 @@ describe("Dropdown", () => {
 
 		expect(options).toHaveLength(3);
 
-		await component.$set({
+		component.$set({
 			value: "",
 			choices: [
 				["apple", "apple"],
@@ -223,7 +253,7 @@ describe("Dropdown", () => {
 			]
 		});
 
-		await item.focus();
+		item.focus();
 
 		const options_new = getAllByTestId("dropdown-option");
 		expect(options_new).toHaveLength(3);

diff --git a/js/dropdown/shared/Dropdown.svelte b/js/dropdown/shared/Dropdown.svelte
@@ -74,7 +74,7 @@
 			dispatch("select", {
 				index: selected_index,
 				value: choices_values[selected_index],
-				selected: true
+				selected: true,
 			});
 		}
 	}
@@ -132,6 +132,7 @@
 		if (!allow_custom_value) {
 			input_text = choices_names[choices_values.indexOf(value as string)];
 		}
+		value = input_text;
 		show_options = false;
 		active_index = null;
 		dispatch("blur");

diff --git a/js/dropdown/shared/Multiselect.svelte b/js/dropdown/shared/Multiselect.svelte
@@ -93,6 +93,12 @@
 		if (!allow_custom_value) {
 			input_text = "";
 		}
+
+		if (allow_custom_value && input_text !== "") {
+			add_selected_choice(input_text);
+			input_text = "";
+		}
+
 		show_options = false;
 		active_index = null;
 		dispatch("blur");
@@ -106,7 +112,7 @@
 				typeof option_index === "number"
 					? choices_values[option_index]
 					: option_index,
-			selected: false
+			selected: false,
 		});
 	}
 
@@ -119,7 +125,7 @@
 					typeof option_index === "number"
 						? choices_values[option_index]
 						: option_index,
-				selected: true
+				selected: true,
 			});
 		}
 		if (selected_indices.length === max_choices) {