mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-11-21 01:01:05 +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(
"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");
});
});

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

@ -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];