From 8e52e13ee98e0a3488c0f0bdd296c98e762d90ea Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Sun, 12 Jun 2022 07:12:11 -0700
Subject: [PATCH] fix: use native binding for `value` prop in `ComboBox`,
 `MultiSelect` (#1343)

* fix(combo-box): use native binding for value prop (fixes #1262)

* fix(multi-select): use native binding for value prop
---
 src/ComboBox/ComboBox.svelte       | 27 ++++++++++++---------------
 src/MultiSelect/MultiSelect.svelte | 15 +++++----------
 2 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 76e59a44..8ce93f71 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -121,7 +121,6 @@
   const dispatch = createEventDispatcher();
 
   let selectedItem = undefined;
-  let inputValue = value;
   let prevSelectedId = null;
   let highlightedIndex = -1;
 
@@ -161,7 +160,7 @@
     selectedId = undefined;
     selectedItem = undefined;
     open = false;
-    inputValue = "";
+    value = "";
     if (options?.focus !== false) ref?.focus();
   }
 
@@ -174,12 +173,12 @@
       filteredItems = [];
       if (!selectedItem) {
         selectedId = undefined;
-        inputValue = "";
+        value = "";
         highlightedIndex = -1;
         highlightedId = undefined;
       } else {
-        // programmatically set inputValue
-        inputValue = selectedItem.text;
+        // programmatically set value
+        value = selectedItem.text;
       }
     }
   });
@@ -207,7 +206,6 @@
   $: comboId = `combo-${id}`;
   $: highlightedId = items[highlightedIndex] ? items[highlightedIndex].id : 0;
   $: filteredItems = items.filter((item) => shouldFilterItem(item, value));
-  $: value = inputValue;
 </script>
 
 <svelte:window
@@ -257,6 +255,7 @@
     >
       <input
         bind:this="{ref}"
+        bind:value
         tabindex="0"
         autocomplete="off"
         aria-autocomplete="list"
@@ -269,19 +268,17 @@
         disabled="{disabled}"
         placeholder="{placeholder}"
         id="{id}"
-        value="{inputValue}"
         name="{name}"
         {...$$restProps}
         class:bx--text-input="{true}"
         class:bx--text-input--light="{light}"
-        class:bx--text-input--empty="{inputValue === ''}"
-        on:input="{async ({ target }) => {
+        class:bx--text-input--empty="{value === ''}"
+        on:input="{({ target }) => {
           if (!open && target.value.length > 0) {
             open = true;
           }
 
-          inputValue = target.value;
-          if (!inputValue.length) {
+          if (!value.length) {
             clear();
             open = true;
           }
@@ -297,14 +294,14 @@
             ) {
               open = false;
               if (filteredItems[highlightedIndex]) {
-                inputValue = filteredItems[highlightedIndex].text;
+                value = filteredItems[highlightedIndex].text;
                 selectedItem = filteredItems[highlightedIndex];
                 selectedId = filteredItems[highlightedIndex].id;
               }
             } else {
               open = false;
               if (filteredItems[0]) {
-                inputValue = filteredItems[0].text;
+                value = filteredItems[0].text;
                 selectedItem = filteredItems[0];
                 selectedId = filteredItems[0].id;
               }
@@ -344,7 +341,7 @@
           class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
         />
       {/if}
-      {#if inputValue}
+      {#if value}
         <ListBoxSelection
           on:clear
           on:clear="{clear}"
@@ -385,7 +382,7 @@
               open = false;
 
               if (filteredItems[i]) {
-                inputValue = filteredItems[i].text;
+                value = filteredItems[i].text;
               }
             }}"
             on:mouseenter="{() => {
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}"