From 8bd615b250a193afdb7f545f88d99e9b7a368695 Mon Sep 17 00:00:00 2001
From: Johannes <hffmr@users.noreply.github.com>
Date: Sat, 23 Jul 2022 15:15:11 +0200
Subject: [PATCH] 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        |  6 ++++
 .../FilterableComboBoxCustomLabel.svelte      | 34 +++++++++++++++++++
 src/ComboBox/ComboBox.svelte                  |  8 ++---
 3 files changed, 44 insertions(+), 4 deletions(-)
 create mode 100644 docs/src/pages/framed/ComboBox/FilterableComboBoxCustomLabel.svelte

diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx
index 4e7985b1..92736785 100644
--- a/docs/src/pages/components/ComboBox.svx
+++ b/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.
diff --git a/docs/src/pages/framed/ComboBox/FilterableComboBoxCustomLabel.svelte b/docs/src/pages/framed/ComboBox/FilterableComboBoxCustomLabel.svelte
new file mode 100644
index 00000000..c5eda1ce
--- /dev/null
+++ b/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}"
+/>
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 8ce93f71..6a2e67d7 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/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="{() => {