diff --git a/src/lib/Combobox.svelte b/src/lib/Combobox.svelte index 279478d..6e248f8 100644 --- a/src/lib/Combobox.svelte +++ b/src/lib/Combobox.svelte @@ -40,6 +40,7 @@ placeholder?: string; notFoundMessage?: string; class?: ClassValue | null | undefined; + use?: () => void; onvalidate?: (e: InputValidatorEvent) => void; onchange?: (item: ComboboxOption) => void; } @@ -57,6 +58,7 @@ placeholder, notFoundMessage = 'No results found', class: classValue, + use, onvalidate, onchange }: Props = $props(); @@ -183,10 +185,24 @@ } }; + const conditionalUse = $derived(use ? use : () => {}); + export const focus = () => { searchInput?.focus(); }; + export const setValueByString = (searchVal: string) => { + const item = options.find((opt) => opt.value === searchVal); + if (item) { + value = item; + searchValue = ''; + open = false; + onchange?.(item); + } else { + console.warn(`Combobox: No option found with value "${searchVal}"`); + } + }; + if (browser) { // update picker position on window resize window.addEventListener('resize', updatePickerRect); @@ -444,6 +460,9 @@ searchValue = searchInput.value; searching = true; }} + use={() => { + conditionalUse(); + }} /> {#if (value && value.infotext) || (highlighted && useHighlighted && highlighted.infotext)}