Skip to content

Commit

Permalink
fix(multi-select): fix sorting behavior
Browse files Browse the repository at this point in the history
- 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
  • Loading branch information
malinowskip authored and metonym committed Nov 30, 2024
1 parent e165fa3 commit c3a390f
Showing 1 changed file with 19 additions and 6 deletions.
25 changes: 19 additions & 6 deletions src/MultiSelect/MultiSelect.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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 }));
Expand All @@ -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));
Expand Down

0 comments on commit c3a390f

Please sign in to comment.