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="{() => {