Fix Dropdown change event when allow_custom_value is true (#12572)

* Add code

* add changeset

* Fix

* custom value

* Fix

* Fix typing issue

---------

Co-authored-by: gradio-pr-bot <[email protected]>

Author: freddyaboulton

.changeset/hot-paths-shine.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dropdown": patch
+"gradio": patch
+---
+
+fix:Fix Dropdown change event when allow_custom_value is true

demo/dropdown_custom_value/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: dropdown_custom_value"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio\n", "\n", "with gradio.Blocks() as demo:\n", "    dropdown = gradio.Dropdown(\n", "        choices=[(\"hello\", \"goodbye\"), (\"abc\", \"123\")],\n", "        allow_custom_value=True,\n", "        label=\"Dropdown\",\n", "    )\n", "    text = gradio.Textbox(label=\"Output\")\n", "    dropdown.change(lambda x: x, inputs=dropdown, outputs=text)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/dropdown_custom_value/run.py

@@ -0,0 +1,13 @@
+import gradio
+
+with gradio.Blocks() as demo:
+    dropdown = gradio.Dropdown(
+        choices=[("hello", "goodbye"), ("abc", "123")],
+        allow_custom_value=True,
+        label="Dropdown",
+    )
+    text = gradio.Textbox(label="Output")
+    dropdown.change(lambda x: x, inputs=dropdown, outputs=text)
+
+if __name__ == "__main__":
+    demo.launch()

js/dropdown/shared/Dropdown.svelte

@@ -3,10 +3,10 @@
 	import { BlockTitle, IconButtonWrapper } from "@gradio/atoms";
 	import { DropdownArrow } from "@gradio/icons";
 	import { handle_filter, handle_shared_keys } from "./utils";
-	import type {
-		SelectData,
-		KeyUpData,
-		CustomButton as CustomButtonType
+	import {
+		type SelectData,
+		type KeyUpData,
+		type CustomButton as CustomButtonType
 	} from "@gradio/utils";
 	import { tick } from "svelte";
 
@@ -79,6 +79,9 @@
 			return ["", 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;
 	let initialized = $state(false);
 	let disabled = $derived(!interactive);
 
@@ -96,6 +99,7 @@
 
 		let [_input_text, _value] = choices[selected_index];
 		input_text = _input_text;
+		last_typed_value = input_text;
 		value = _value;
 		on_select?.({
 			index: selected_index,
@@ -104,6 +108,7 @@
 		});
 		show_options = false;
 		active_index = null;
+		on_input?.();
 		filter_input.blur();
 	}
 
@@ -118,7 +123,13 @@
 			input_text =
 				choices_names[choices_values.indexOf(value as string | number)];
 		} else {
-			value = input_text;
+			if (choices_names.includes(input_text)) {
+				selected_index = choices_names.indexOf(input_text);
+				value = choices_values[selected_index];
+			} else if (input_text !== last_typed_value) {
+				value = input_text;
+				selected_index = null;
+			}
 		}
 		show_options = false;
 		active_index = null;
@@ -137,6 +148,7 @@
 			filtered_indices
 		);
 		if (e.key === "Enter") {
+			last_typed_value = input_text;
 			if (active_index !== null) {
 				selected_index = active_index;
 				value = choices_values[active_index];

js/spa/test/dropdown_custom_value.spec.ts

@@ -0,0 +1,77 @@
+import { test, expect } from "@self/tootils";
+
+test.describe("Dropdown with allow_custom_value=True", () => {
+	test("selecting an option updates the textbox with the value, not the name", async ({
+		page
+	}) => {
+		const dropdown = page.getByRole("listbox", { name: "Dropdown" });
+		const output = page.getByLabel("Output");
+
+		await dropdown.click();
+		await page.getByRole("option", { name: "abc" }).click();
+
+		await expect(output).toHaveValue("123");
+	});
+
+	test("blurring dropdown after selecting an option does not change the value", async ({
+		page
+	}) => {
+		const dropdown = page.getByRole("listbox", { name: "Dropdown" });
+		const output = page.getByLabel("Output");
+
+		await dropdown.click();
+		await page.getByRole("option", { name: "abc" }).click();
+
+		await expect(output).toHaveValue("123");
+
+		await dropdown.click();
+		await dropdown.blur();
+
+		await expect(output).toHaveValue("123");
+	});
+
+	test("typing a custom value and pressing Enter updates the textbox", async ({
+		page
+	}) => {
+		const dropdown = page.getByRole("listbox", { name: "Dropdown" });
+		const output = page.getByLabel("Output");
+
+		// Focus the dropdown and type a custom value
+		await dropdown.click();
+		await dropdown.fill("my custom value");
+		await dropdown.press("Enter");
+
+		// The textbox should show the custom value
+		await expect(output).toHaveValue("my custom value");
+	});
+
+	test("typing a custom value and blurring updates the textbox", async ({
+		page
+	}) => {
+		const dropdown = page.getByRole("listbox", { name: "Dropdown" });
+		const output = page.getByLabel("Output");
+
+		await dropdown.click();
+		await dropdown.fill("another custom value");
+		await dropdown.blur();
+
+		await expect(output).toHaveValue("another custom value");
+	});
+
+	test("selecting an option after typing a custom value works correctly", async ({
+		page
+	}) => {
+		const dropdown = page.getByRole("listbox", { name: "Dropdown" });
+		const output = page.getByLabel("Output");
+
+		await dropdown.click();
+		await dropdown.fill("custom");
+		await dropdown.press("Enter");
+		await expect(output).toHaveValue("custom");
+
+		await dropdown.click();
+		await page.getByRole("option", { name: "hello" }).click();
+
+		await expect(output).toHaveValue("goodbye");
+	});
+});