combobox: add use property

This commit is contained in:
Elijah Duffy
2025-07-04 03:38:15 -07:00
parent 104d99661c
commit b815ddf287

View File

@@ -40,6 +40,7 @@
placeholder?: string; placeholder?: string;
notFoundMessage?: string; notFoundMessage?: string;
class?: ClassValue | null | undefined; class?: ClassValue | null | undefined;
use?: () => void;
onvalidate?: (e: InputValidatorEvent) => void; onvalidate?: (e: InputValidatorEvent) => void;
onchange?: (item: ComboboxOption) => void; onchange?: (item: ComboboxOption) => void;
} }
@@ -57,6 +58,7 @@
placeholder, placeholder,
notFoundMessage = 'No results found', notFoundMessage = 'No results found',
class: classValue, class: classValue,
use,
onvalidate, onvalidate,
onchange onchange
}: Props = $props(); }: Props = $props();
@@ -183,10 +185,24 @@
} }
}; };
const conditionalUse = $derived(use ? use : () => {});
export const focus = () => { export const focus = () => {
searchInput?.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) { if (browser) {
// update picker position on window resize // update picker position on window resize
window.addEventListener('resize', updatePickerRect); window.addEventListener('resize', updatePickerRect);
@@ -444,6 +460,9 @@
searchValue = searchInput.value; searchValue = searchInput.value;
searching = true; searching = true;
}} }}
use={() => {
conditionalUse();
}}
/> />
{#if (value && value.infotext) || (highlighted && useHighlighted && highlighted.infotext)} {#if (value && value.infotext) || (highlighted && useHighlighted && highlighted.infotext)}