fix: sort multiselect input label values (#106)

canonical · Feb 9, 2024 · 98e3fa3 · 98e3fa3
1 parent 7e30def
commit 98e3fa3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/src/lib/components/MultiSelect/MultiSelect.test.tsx b/src/lib/components/MultiSelect/MultiSelect.test.tsx
@@ -186,6 +186,21 @@ it("sorts grouped options alphabetically", async () => {
   checkGroupOrder("Group 2", ["other A", "other B"]);
 });
 
+it("sorts input field value alphabetically", async () => {
+  const itemA = { label: "item A", value: 1 };
+  const itemB = { label: "item B", value: 2 };
+
+  render(
+    <MultiSelect
+      items={[itemA, itemB]}
+      selectedItems={[itemB, itemA]}
+      variant="condensed"
+    />,
+  );
+
+  expect(screen.getByRole("combobox")).toHaveTextContent("item A, item B");
+});
+
 it("hides group title when no items match the search query", async () => {
   const itemsWithGroup = [
     { label: "item one", value: 1, group: "Group 1" },

diff --git a/src/lib/components/MultiSelect/MultiSelect.tsx b/src/lib/components/MultiSelect/MultiSelect.tsx
@@ -214,6 +214,7 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
     .filter((selectedItem) =>
       items.some((item) => item.value === selectedItem.value),
     )
+    .sort(sortAlphabetically)
     .map((el) => el.label)
     .join(", ");
   return (