diff --git a/.changeset/tasty-spies-spend.md b/.changeset/tasty-spies-spend.md new file mode 100644 index 0000000000..76894fbc20 --- /dev/null +++ b/.changeset/tasty-spies-spend.md @@ -0,0 +1,6 @@ +--- +"@gradio/dropdown": patch +"gradio": patch +--- + +fix:Retain dropdown value if choices have been changed diff --git a/js/dropdown/dropdown.test.ts b/js/dropdown/dropdown.test.ts index e9b53620c2..e27b7a4eab 100644 --- a/js/dropdown/dropdown.test.ts +++ b/js/dropdown/dropdown.test.ts @@ -124,8 +124,6 @@ describe("Dropdown", () => { const item: HTMLInputElement = getByLabelText( "Dropdown" ) as HTMLInputElement; - const change_event = listen("change"); - const select_event = listen("select"); item.focus(); await event.keyboard("other"); @@ -135,7 +133,7 @@ describe("Dropdown", () => { const { getByLabelText, listen } = await render(Dropdown, { show_label: true, loading_status, - value: "default", + value: "new ", label: "Dropdown", max_choices: undefined, allow_custom_value: true, @@ -156,7 +154,7 @@ describe("Dropdown", () => { await event.keyboard("kevin"); await item.blur(); - assert.equal(item.value, "kevin"); + assert.equal(item.value, "new kevin"); assert.equal(change_event.callCount, 1); }); @@ -407,4 +405,37 @@ describe("Dropdown", () => { await item.blur(); expect(item.value).toBe("apple"); }); + + test("updating choices should keep the dropdown focus-able and change the choice name", async () => { + const { getByLabelText, component } = await render(Dropdown, { + show_label: true, + loading_status, + value: "apple_internal_value", + 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("apple_choice"); + + component.$set({ + choices: [ + ["apple_new_choice", "apple_internal_value"], + ["zebra_new_choice", "zebra_internal_value"] + ] + }); + + await item.focus(); + await item.blur(); + await expect(item.value).toBe("apple_new_choice"); + }); }); diff --git a/js/dropdown/shared/Dropdown.svelte b/js/dropdown/shared/Dropdown.svelte index 19b009b11e..0a5d7861ec 100644 --- a/js/dropdown/shared/Dropdown.svelte +++ b/js/dropdown/shared/Dropdown.svelte @@ -8,8 +8,9 @@ export let label: string; export let info: string | undefined = undefined; - export let value: string | number | (string | number)[] | undefined = []; - let old_value: string | number | (string | number)[] | undefined = []; + export let value: string | number | (string | number)[] | undefined = + undefined; + let old_value: string | number | (string | number)[] | undefined = undefined; export let value_is_output = false; export let choices: [string, string | number][]; let old_choices: [string, string | number][]; @@ -92,9 +93,19 @@ } $: { - if (choices !== old_choices || input_text !== old_input_text) { - filtered_indices = handle_filter(choices, input_text); + if (choices !== old_choices) { + set_input_text(); old_choices = choices; + filtered_indices = handle_filter(choices, input_text); + if (!allow_custom_value && filtered_indices.length > 0) { + active_index = filtered_indices[0]; + } + } + } + + $: { + if (input_text !== old_input_text) { + filtered_indices = handle_filter(choices, input_text); old_input_text = input_text; if (!allow_custom_value && filtered_indices.length > 0) { active_index = filtered_indices[0];