ensure dropdown stays open when identical data is passed in (#5323)

* ensure dropwdown stays open when new data is passed in

* add changeset

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/vast-wolves-kick.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dropdown": patch
+"gradio": patch
+---
+
+fix:ensure dropdown stays open when identical data is passed in

js/dropdown/dropdown.test.ts

@@ -0,0 +1,146 @@
+import { test, describe, assert, afterEach } from "vitest";
+import { cleanup, fireEvent, render, get_text, wait } from "@gradio/tootils";
+import event from "@testing-library/user-event";
+import { setupi18n } from "../app/src/i18n";
+
+import Dropdown from "./interactive";
+import type { LoadingStatus } from "@gradio/statustracker";
+
+const loading_status: LoadingStatus = {
+	eta: 0,
+	queue_position: 1,
+	queue_size: 1,
+	status: "complete" as LoadingStatus["status"],
+	scroll_to_output: false,
+	visible: true,
+	fn_index: 0,
+	show_progress: "full"
+};
+
+describe("Dropdown", () => {
+	afterEach(() => cleanup());
+	beforeEach(() => {
+		setupi18n();
+	});
+	test("renders provided value", async () => {
+		const { getByLabelText } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			max_choices: 10,
+			value: "choice",
+			label: "Dropdown",
+			choices: ["choice", "choice2"]
+		});
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+		assert.equal(item.value, "choice");
+	});
+
+	test("selecting the textbox should show the options", async () => {
+		const { getByLabelText, getAllByTestId, debug } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			max_choices: 10,
+			value: "choice",
+			label: "Dropdown",
+			choices: ["choice", "choice2"]
+		});
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		await item.focus();
+
+		const options = getAllByTestId("dropdown-option");
+
+		expect(options).toHaveLength(2);
+		expect(options[0]).toContainHTML("choice");
+		expect(options[1]).toContainHTML("choice2");
+	});
+
+	test("editing the textbox value should filter the options", async () => {
+		const { getByLabelText, getAllByTestId, debug } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			max_choices: 10,
+			value: "",
+			label: "Dropdown",
+			choices: ["apple", "zebra"]
+		});
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		await item.focus();
+		const options = getAllByTestId("dropdown-option");
+
+		expect(options).toHaveLength(2);
+
+		await event.keyboard("z");
+		const options_new = getAllByTestId("dropdown-option");
+
+		expect(options_new).toHaveLength(1);
+		expect(options[0]).toContainHTML("zebra");
+	});
+
+	test("deselecting and reselcting a filtered dropdown should show all options again", async () => {
+		const { getByLabelText, getAllByTestId, debug } = await render(Dropdown, {
+			show_label: true,
+			loading_status,
+			max_choices: 10,
+			value: "",
+			label: "Dropdown",
+			choices: ["apple", "zebra", "pony"]
+		});
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		await item.focus();
+		await event.keyboard("z");
+		const options = getAllByTestId("dropdown-option");
+
+		expect(options).toHaveLength(1);
+
+		await item.blur();
+		await item.focus();
+		const options_new = getAllByTestId("dropdown-option");
+
+		expect(options_new).toHaveLength(3);
+	});
+
+	test("passing in a new set of identical choices when the dropdown is open should not filter the dropdown", async () => {
+		const { getByLabelText, getAllByTestId, component } = await render(
+			Dropdown,
+			{
+				show_label: true,
+				loading_status,
+				max_choices: 10,
+				value: "zebra",
+				label: "Dropdown",
+				choices: ["apple", "zebra", "pony"]
+			}
+		);
+
+		const item: HTMLInputElement = getByLabelText(
+			"Dropdown"
+		) as HTMLInputElement;
+
+		await item.focus();
+
+		const options = getAllByTestId("dropdown-option");
+
+		expect(options).toHaveLength(3);
+
+		await component.$set({ choices: ["apple", "zebra", "pony"] });
+
+		const options_new = getAllByTestId("dropdown-option");
+
+		expect(options_new).toHaveLength(3);
+	});
+});

js/dropdown/shared/Dropdown.svelte

@@ -36,10 +36,19 @@
 		inputValue = value;
 	}
 
-	$: filtered = choices.filter((o) =>
-		inputValue ? o.toLowerCase().includes(inputValue.toLowerCase()) : o
-	);
+	let old_choices: string[] = [];
+	let filtered: string[] = [];
 
+	$: old_choices, inputValue, handle_filter();
+
+	function handle_filter(): void {
+		if (choices !== old_choices || typeof inputValue === "string") {
+			old_choices = choices;
+			filtered = choices.filter((o) =>
+				inputValue ? o.toLowerCase().includes(inputValue.toLowerCase()) : o
+			);
+		}
+	}
 	$: if (!activeOption || !filtered.includes(activeOption)) {
 		activeOption = filtered.length ? filtered[0] : null;
 	}
@@ -53,6 +62,7 @@
 	afterUpdate(() => {
 		value_is_output = false;
 	});
+
 	$: {
 		if (JSON.stringify(value) != JSON.stringify(old_value)) {
 			old_value = Array.isArray(value) ? value.slice() : value;

js/dropdown/shared/DropdownOptions.svelte

@@ -42,7 +42,7 @@
 				let elements = listElement.querySelectorAll("li");
 				for (const element of Array.from(elements)) {
 					if (element.getAttribute("data-value") === value) {
-						listElement.scrollTo(0, (element as HTMLLIElement).offsetTop);
+						listElement?.scrollTo?.(0, (element as HTMLLIElement).offsetTop);
 						break;
 					}
 				}
@@ -95,6 +95,7 @@
 				class:dark:bg-gray-600={activeOption === choice}
 				data-value={choice}
 				aria-label={choice}
+				data-testid="dropdown-option"
 			>
 				<span class:hide={!_value.includes(choice)} class="inner-item">
 					✓