mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-11-27 01:40:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Retain dropdown value if choices have been changed (#7401)

Browse Source 
* dropdown choice bug

* add changeset

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
Abubakar Abid 2024-02-12 15:52:54 -08:00 committed by GitHub
parent 46b45683e1
commit dff410955e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 56 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/tasty-spies-spend.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/dropdown": patch
"gradio": patch
---
fix:Retain dropdown value if choices have been changed

39
js/dropdown/dropdown.test.ts
View File

@ -124,8 +124,6 @@ describe("Dropdown", () => {
const item: HTMLInputElement = getByLabelText( const item: HTMLInputElement = getByLabelText(
"Dropdown" "Dropdown"
) as HTMLInputElement; ) as HTMLInputElement;
const change_event = listen("change");
const select_event = listen("select");
item.focus(); item.focus();
await event.keyboard("other"); await event.keyboard("other");
@ -135,7 +133,7 @@ describe("Dropdown", () => {
const { getByLabelText, listen } = await render(Dropdown, { const { getByLabelText, listen } = await render(Dropdown, {
show_label: true, show_label: true,
loading_status, loading_status,
value: "default", value: "new ",
label: "Dropdown", label: "Dropdown",
max_choices: undefined, max_choices: undefined,
allow_custom_value: true, allow_custom_value: true,
@ -156,7 +154,7 @@ describe("Dropdown", () => {
await event.keyboard("kevin"); await event.keyboard("kevin");
await item.blur(); await item.blur();
assert.equal(item.value, "kevin"); assert.equal(item.value, "new kevin");
assert.equal(change_event.callCount, 1); assert.equal(change_event.callCount, 1);
}); });
@ -407,4 +405,37 @@ describe("Dropdown", () => {
await item.blur(); await item.blur();
expect(item.value).toBe("apple"); 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");
});
}); });

19
js/dropdown/shared/Dropdown.svelte
View File

@ -8,8 +8,9 @@
export let label: string; export let label: string;
export let info: string | undefined = undefined; export let info: string | undefined = undefined;
export let value: string | number | (string | number)[] | undefined = []; export let value: string | number | (string | number)[] | undefined =
let old_value: string | number | (string | number)[] | undefined = []; undefined;
let old_value: string | number | (string | number)[] | undefined = undefined;
export let value_is_output = false; export let value_is_output = false;
export let choices: [string, string | number][]; export let choices: [string, string | number][];
let old_choices: [string, string | number][]; let old_choices: [string, string | number][];
@ -92,9 +93,19 @@
} }
$: { $: {
if (choices !== old_choices || input_text !== old_input_text) { if (choices !== old_choices) {
filtered_indices = handle_filter(choices, input_text); set_input_text();
old_choices = choices; 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; old_input_text = input_text;
if (!allow_custom_value && filtered_indices.length > 0) { if (!allow_custom_value && filtered_indices.length > 0) {
active_index = filtered_indices[0]; active_index = filtered_indices[0];