From c3a390f3fef072c6b736e33a85a2ae772df12e52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Malinowski?= <p@malinowski.pm>
Date: Thu, 28 Nov 2024 20:50:15 +0100
Subject: [PATCH] fix(multi-select): fix sorting behavior

- Menu items are sorted when the component renders.
- With selectionFeedback: top, selected items are immediately pinned to
  the top.
- With selectionFeedback: top-after-reopen, selected items are pinned to the top only
  after the dropdown is closed.
- With selectionFeedback: fixed, selected items are never pinned to the
  top.

Fixes #2066
---
 src/MultiSelect/MultiSelect.svelte | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index abbdf772..8fa8abed 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -243,11 +243,11 @@
     }
   });
 
-  $: menuId = `menu-${id}`;
-  $: inline = type === "inline";
-  $: ariaLabel = $$props["aria-label"] || "Choose an item";
-  $: sortedItems = (() => {
-    if (selectionFeedback === "top" && selectedIds.length > 0) {
+  function sort() {
+    if (
+      selectionFeedback === "top" ||
+      selectionFeedback === "top-after-reopen"
+    ) {
       const checkedItems = items
         .filter((item) => selectedIds.includes(item.id))
         .map((item) => ({ ...item, checked: true }));
@@ -269,7 +269,20 @@
         checked: selectedIds.includes(item.id),
       }))
       .sort(sortItem);
-  })();
+  }
+
+  let sortedItems = sort();
+
+  $: menuId = `menu-${id}`;
+  $: inline = type === "inline";
+  $: ariaLabel = $$props["aria-label"] || "Choose an item";
+  $: if (
+    selectedIds &&
+    (selectionFeedback === "top" ||
+      (selectionFeedback === "top-after-reopen" && open === false))
+  ) {
+    sortedItems = sort();
+  }
   $: checked = sortedItems.filter(({ checked }) => checked);
   $: unchecked = sortedItems.filter(({ checked }) => !checked);
   $: filteredItems = sortedItems.filter((item) => filterItem(item, value));