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
This commit is contained in:
Paweł Malinowski 2024-11-28 20:50:15 +01:00 committed by Eric Liu
commit c3a390f3fe

View file

@ -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));