fix(combobox): filterable and custom label (#1405)

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., when working with 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}"
+/>