From a898e415dc48c99dfabd2605d7083038380f638f Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 12 Jun 2022 06:58:40 -0700
Subject: [PATCH] fix(multi-select): use native binding for value prop

---
 src/MultiSelect/MultiSelect.svelte | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index ca6c06a6..e90c818f 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -183,7 +183,6 @@
 
   const dispatch = createEventDispatcher();
 
-  let inputValue = "";
   let initialSorted = false;
   let highlightedIndex = -1;
   let prevChecked = [];
@@ -255,7 +254,7 @@
       }
 
       highlightedIndex = -1;
-      inputValue = "";
+      value = "";
     }
 
     items = sortedItems;
@@ -275,7 +274,6 @@
     highlightedIndex > -1
       ? (filterable ? filteredItems : sortedItems)[highlightedIndex]?.id ?? null
       : null;
-  $: value = inputValue;
 </script>
 
 <svelte:window
@@ -403,6 +401,7 @@
       {#if filterable}
         <input
           bind:this="{inputRef}"
+          bind:value
           {...$$restProps}
           role="combobox"
           tabindex="0"
@@ -413,11 +412,8 @@
           aria-disabled="{disabled}"
           aria-controls="{menuId}"
           class:bx--text-input="{true}"
-          class:bx--text-input--empty="{inputValue === ''}"
+          class:bx--text-input--empty="{value === ''}"
           class:bx--text-input--light="{light}"
-          on:input="{({ target }) => {
-            inputValue = target.value;
-          }}"
           on:keydown
           on:keydown|stopPropagation="{({ key }) => {
             if (key === 'Enter') {
@@ -451,15 +447,14 @@
           placeholder="{placeholder}"
           id="{id}"
           name="{name}"
-          value="{inputValue}"
         />
         {#if invalid}
           <WarningFilled class="bx--list-box__invalid-icon" />
         {/if}
-        {#if inputValue}
+        {#if value}
           <ListBoxSelection
             on:clear="{() => {
-              inputValue = '';
+              value = '';
               open = false;
             }}"
             translateWithId="{translateWithIdSelection}"