diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx
index 4e7985b1..10bbf56d 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.
+### Filterable with custom label
+
+Combine a custom label `itemToString` with the filterable option, e.g., when working with internationalization.
+
+
+
### 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 @@
+
+
+
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="{() => {