fix(combobox): value should call itemToString with filtered item (#1411)

Fixes #1405

When using the `shouldFilterItem` prop, the `ComboBox` does not display the custom label set with `itemToString` in the input after a selection.

docs/src/pages/components/ComboBox.svx

@@ -54,6 +54,12 @@ Specify `focus: false` in the method options to avoid re-focusing the input.
 
 <FileSource src="/framed/ComboBox/FilterableComboBox" />
 
+### Filterable with custom label
+
+Combine a custom label `itemToString` with the filterable option (e.g., internationalization).
+
+<FileSource src="/framed/ComboBox/FilterableComboBoxCustomLabel" />
+
 ### Top direction
 
 Set `direction` to `"top"` for the combobox dropdown menu to appear above the input.

docs/src/pages/framed/ComboBox/FilterableComboBoxCustomLabel.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { ComboBox } from "carbon-components-svelte";
+
+  const translation = {
+    Slack: 'Custom label for "Slack"',
+    Email: 'Custom label for "Email"',
+    Fax: 'Custom label for "Fax"',
+  };
+
+  function itemToString(item) {
+    return translation[item.key];
+  }
+
+  function shouldFilterItem(item, value) {
+    if (!value) return true;
+    const comparison = value.toLowerCase();
+    return (
+      item.key.toLowerCase().includes(comparison) ||
+      itemToString(item).toLowerCase().includes(comparison)
+    );
+  }
+</script>
+
+<ComboBox
+  titleText="Contact"
+  placeholder="Select contact method"
+  items="{[
+    { id: '0', key: 'Slack' },
+    { id: '1', key: 'Email' },
+    { id: '2', key: 'Fax' },
+  ]}"
+  shouldFilterItem="{shouldFilterItem}"
+  itemToString="{itemToString}"
+/>

src/ComboBox/ComboBox.svelte

@@ -178,7 +178,7 @@
         highlightedId = undefined;
       } else {
         // programmatically set value
-        value = selectedItem.text;
+        value = itemToString(selectedItem);
       }
     }
   });
@@ -294,14 +294,14 @@
             ) {
               open = false;
               if (filteredItems[highlightedIndex]) {
-                value = filteredItems[highlightedIndex].text;
+                value = itemToString(filteredItems[highlightedIndex]);
                 selectedItem = filteredItems[highlightedIndex];
                 selectedId = filteredItems[highlightedIndex].id;
               }
             } else {
               open = false;
               if (filteredItems[0]) {
-                value = filteredItems[0].text;
+                value = itemToString(filteredItems[0]);
                 selectedItem = filteredItems[0];
                 selectedId = filteredItems[0].id;
               }
@@ -382,7 +382,7 @@
               open = false;
 
               if (filteredItems[i]) {
-                value = filteredItems[i].text;
+                value = itemToString(filteredItems[i]);
               }
             }}"
             on:mouseenter="{() => {