mirror of
https://github.com/gradio-app/gradio.git
synced 2025-03-13 11:57:29 +08:00
Cancel Dropdown Filter (#5360)
* Reset the dropdown filter on blur * Remove focus triggered by blurring to the label * add changeset --------- Co-authored-by: Abubakar Abid <abubakar@huggingface.co> Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Hannah <hannahblair@users.noreply.github.com>
This commit is contained in:
parent
4ccb9a86f1
commit
6466652583
6
.changeset/loud-colts-lie.md
Normal file
6
.changeset/loud-colts-lie.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
"@gradio/dropdown": patch
|
||||
"gradio": patch
|
||||
---
|
||||
|
||||
fix:Cancel Dropdown Filter
|
@ -1,4 +1,4 @@
|
||||
import { test, describe, assert, afterEach } from "vitest";
|
||||
import { test, describe, assert, afterEach, vi } 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";
|
||||
@ -18,7 +18,10 @@ const loading_status: LoadingStatus = {
|
||||
};
|
||||
|
||||
describe("Dropdown", () => {
|
||||
afterEach(() => cleanup());
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.useRealTimers();
|
||||
});
|
||||
beforeEach(() => {
|
||||
setupi18n();
|
||||
});
|
||||
@ -87,7 +90,55 @@ describe("Dropdown", () => {
|
||||
expect(options[0]).toContainHTML("zebra");
|
||||
});
|
||||
|
||||
test("blurring the textbox should cancel the filter", async () => {
|
||||
const { getByLabelText, listen } = await render(Dropdown, {
|
||||
show_label: true,
|
||||
loading_status,
|
||||
value: "default",
|
||||
label: "Dropdown",
|
||||
choices: ["default", "other"]
|
||||
});
|
||||
|
||||
const item: HTMLInputElement = getByLabelText(
|
||||
"Dropdown"
|
||||
) as HTMLInputElement;
|
||||
const change_event = listen("change");
|
||||
const select_event = listen("select");
|
||||
|
||||
await item.focus();
|
||||
await event.keyboard("other");
|
||||
await item.blur();
|
||||
|
||||
assert.equal(item.value, "default");
|
||||
assert.equal(change_event.callCount, 0);
|
||||
assert.equal(select_event.callCount, 0);
|
||||
});
|
||||
|
||||
test("focusing the label should toggle the options", async () => {
|
||||
const { getByLabelText, listen } = await render(Dropdown, {
|
||||
show_label: true,
|
||||
loading_status,
|
||||
value: "default",
|
||||
label: "Dropdown",
|
||||
choices: ["default", "other"]
|
||||
});
|
||||
|
||||
const item: HTMLInputElement = getByLabelText(
|
||||
"Dropdown"
|
||||
) as HTMLInputElement;
|
||||
const blur_event = listen("blur");
|
||||
const focus_event = listen("focus");
|
||||
|
||||
await item.focus();
|
||||
await item.blur();
|
||||
await item.focus();
|
||||
|
||||
assert.equal(blur_event.callCount, 1);
|
||||
assert.equal(focus_event.callCount, 1);
|
||||
});
|
||||
|
||||
test("deselecting and reselcting a filtered dropdown should show all options again", async () => {
|
||||
vi.useFakeTimers();
|
||||
const { getByLabelText, getAllByTestId, debug } = await render(Dropdown, {
|
||||
show_label: true,
|
||||
loading_status,
|
||||
@ -108,6 +159,8 @@ describe("Dropdown", () => {
|
||||
expect(options).toHaveLength(1);
|
||||
|
||||
await item.blur();
|
||||
// Mock 100ms delay between interactions.
|
||||
vi.runAllTimers();
|
||||
await item.focus();
|
||||
const options_new = getAllByTestId("dropdown-option");
|
||||
|
||||
|
@ -101,24 +101,29 @@
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
let blurring = false;
|
||||
|
||||
function handle_blur(e: FocusEvent): void {
|
||||
if (blurring) return;
|
||||
blurring = true;
|
||||
if (multiselect) {
|
||||
inputValue = "";
|
||||
} else if (!allow_custom_value) {
|
||||
if (value !== inputValue) {
|
||||
if (typeof value === "string" && inputValue == "") {
|
||||
inputValue = value;
|
||||
} else {
|
||||
value = undefined;
|
||||
inputValue = "";
|
||||
}
|
||||
}
|
||||
inputValue = value as string | undefined;
|
||||
}
|
||||
showOptions = false;
|
||||
dispatch("blur");
|
||||
setTimeout(() => {
|
||||
blurring = false;
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function handle_focus(e: FocusEvent): void {
|
||||
if (blurring) {
|
||||
// Remove focus triggered by blurring to the label.
|
||||
let target = e.target as HTMLInputElement;
|
||||
return target.blur();
|
||||
}
|
||||
dispatch("focus");
|
||||
showOptions = true;
|
||||
filtered = choices;
|
||||
|
Loading…
x
Reference in New Issue
Block a user