diff --git a/src/ListBox/ListBoxSelection.svelte b/src/ListBox/ListBoxSelection.svelte
index f4192015..53074c44 100644
--- a/src/ListBox/ListBoxSelection.svelte
+++ b/src/ListBox/ListBoxSelection.svelte
@@ -44,13 +44,12 @@
$: if (ctx && ref) {
ctx.declareRef({ key: "selection", ref });
}
-
- $: translationId = selectionCount
- ? translationIds.clearAll
- : translationIds.clearSelection;
+ $: translationId =
+ selectionCount === undefined
+ ? translationIds.clearSelection
+ : translationIds.clearAll;
$: buttonLabel =
- translateWithId?.(translationIds.clearAll) ??
- defaultTranslations[translationIds.clearAll];
+ translateWithId?.(translationId) ?? defaultTranslations[translationId];
$: description =
translateWithId?.(translationId) ?? defaultTranslations[translationId];
diff --git a/tests/ComboBox/ComboBox.test.svelte b/tests/ComboBox/ComboBox.test.svelte
index 249f0dd5..0e5077fa 100644
--- a/tests/ComboBox/ComboBox.test.svelte
+++ b/tests/ComboBox/ComboBox.test.svelte
@@ -1,13 +1,13 @@
{
console.log("select", e.detail);
}}
diff --git a/tests/ComboBox/ComboBox.test.ts b/tests/ComboBox/ComboBox.test.ts
index c7bb0c48..1dbbffe2 100644
--- a/tests/ComboBox/ComboBox.test.ts
+++ b/tests/ComboBox/ComboBox.test.ts
@@ -60,13 +60,35 @@ describe("ComboBox", () => {
},
});
- const clearButton = screen.getByRole("button", { name: /clear/i });
+ const clearButton = screen.getByRole("button", {
+ name: "Clear selected item",
+ });
await user.click(clearButton);
expect(consoleLog).toHaveBeenCalledWith("clear", expect.any(String));
expect(screen.getByRole("textbox")).toHaveValue("");
});
+ it("should use custom translations when translateWithId is provided", () => {
+ const customTranslations = {
+ clearSelection: "Remove selected item",
+ clearAll: "Remove all items",
+ } as const;
+
+ render(ComboBox, {
+ props: {
+ selectedId: "1",
+ value: "Email",
+ translateWithIdSelection: (id) => customTranslations[id],
+ },
+ });
+
+ const clearButton = screen.getByRole("button", {
+ name: "Remove selected item",
+ });
+ expect(clearButton).toBeInTheDocument();
+ });
+
it("should handle disabled state", () => {
render(ComboBox, { props: { disabled: true } });
diff --git a/tests/MultiSelect/MultiSelect.test.ts b/tests/MultiSelect/MultiSelect.test.ts
index cfd668e6..64315f10 100644
--- a/tests/MultiSelect/MultiSelect.test.ts
+++ b/tests/MultiSelect/MultiSelect.test.ts
@@ -124,7 +124,7 @@ describe("MultiSelect", () => {
await toggleOption("C");
expect(nthRenderedOptionText(0)).toBe("A");
- // The newly-selected item also shouldn’t move after the dropdown is closed
+ // The newly-selected item also shouldn't move after the dropdown is closed
// and reopened.
await closeMenu();
await openMenu();
@@ -179,6 +179,42 @@ describe("MultiSelect", () => {
const input = screen.getByRole("combobox");
expect(input).toHaveValue("");
});
+
+ it("should show correct clear button label regardless of selection count", async () => {
+ render(MultiSelect, {
+ items,
+ selectedIds: ["0"],
+ });
+
+ expect(
+ screen.getByLabelText("Clear all selected items"),
+ ).toBeInTheDocument();
+
+ await openMenu();
+ await toggleOption("Email");
+ expect(
+ screen.getByLabelText("Clear all selected items"),
+ ).toBeInTheDocument();
+ });
+
+ it("should use custom translations when translateWithId is provided", async () => {
+ const customTranslations = {
+ clearSelection: "Remove selected item",
+ clearAll: "Remove all items",
+ } as const;
+
+ render(MultiSelect, {
+ items,
+ selectedIds: ["0"],
+ translateWithIdSelection: (id) => customTranslations[id],
+ });
+
+ expect(screen.getByLabelText("Remove all items")).toBeInTheDocument();
+
+ await openMenu();
+ await toggleOption("Email");
+ expect(screen.getByLabelText("Remove all items")).toBeInTheDocument();
+ });
});
describe("keyboard navigation", () => {