diff --git a/.changeset/whole-houses-try.md b/.changeset/whole-houses-try.md new file mode 100644 index 0000000000..d5dc49da4c --- /dev/null +++ b/.changeset/whole-houses-try.md @@ -0,0 +1,6 @@ +--- +"@gradio/dropdown": patch +"gradio": patch +--- + +fix:Quick fix: custom dropdown value diff --git a/js/dropdown/dropdown.test.ts b/js/dropdown/dropdown.test.ts index 01fd1f444c..34596ba2b0 100644 --- a/js/dropdown/dropdown.test.ts +++ b/js/dropdown/dropdown.test.ts @@ -492,4 +492,24 @@ describe("Dropdown", () => { ) as HTMLInputElement; await expect(item.value).toBe(""); }); + + test("ensure dropdown works when initial value is undefined and allow custom value is set", async () => { + const { getByLabelText } = await render(Dropdown, { + show_label: true, + loading_status, + value: undefined, + allow_custom_value: true, + 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 index 1c68c4302f..baa7bcd17e 100644 --- a/js/dropdown/shared/Dropdown.svelte +++ b/js/dropdown/shared/Dropdown.svelte @@ -123,7 +123,7 @@ function set_input_text(): void { set_choice_names_values(); - if (value === undefined) { + if (value === undefined || (Array.isArray(value) && value.length === 0)) { input_text = ""; selected_index = null; } else if (choices_values.includes(value as string)) {