From 4de0fab8597b2c377903e98f88e09f2dcf98ca4a Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 27 Nov 2021 10:04:22 -0800
Subject: [PATCH] Fix filterable multiselect keyboard selection behavior (#923)

* fix(multi-select): correctly select correct item in filterable multiselect

Fixes #922

* fix(multiselect): do not mutate sortedItems
---
 src/MultiSelect/MultiSelect.svelte | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index 71130bcd..56c9036c 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -329,9 +329,10 @@
           change(-1);
         } else if (key === 'Enter') {
           if (highlightedIndex > -1) {
-            sortedItems[highlightedIndex].checked = !sortedItems[
-              highlightedIndex
-            ].checked;
+            sortedItems = sortedItems.map((item, i) => {
+              if (i !== highlightedIndex) return item;
+              return { ...item, checked: !item.checked };
+            });
           }
         }
       }}"
@@ -392,9 +393,22 @@
           on:keydown|stopPropagation="{({ key }) => {
             if (key === 'Enter') {
               if (highlightedIndex > -1) {
-                sortedItems[highlightedIndex].checked = !sortedItems[
-                  highlightedIndex
-                ].checked;
+                if (filterable) {
+                  const filteredItemId = filteredItems[highlightedIndex].id;
+                  const filteredItemIndex = sortedItems
+                    .map((item) => item.id)
+                    .indexOf(filteredItemId);
+
+                  sortedItems = sortedItems.map((item, i) => {
+                    if (i !== filteredItemIndex) return item;
+                    return { ...item, checked: !item.checked };
+                  });
+                } else {
+                  sortedItems = sortedItems.map((item, i) => {
+                    if (i !== highlightedIndex) return item;
+                    return { ...item, checked: !item.checked };
+                  });
+                }
               }
             } else if (key === 'Tab') {
               open = false;