svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Combobox: allow null value

Browse Source
This commit is contained in:
Elijah Duffy
2026-04-15 17:04:49 -07:00
parent 740e038382
commit 9f19a36994
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/lib/Combobox.svelte
View File

@@ -29,10 +29,11 @@
}; };
/** returns option label, falling back to value or 'Undefined Option' if no option provided */ /** returns option label, falling back to value or 'Undefined Option' if no option provided */
const getLabel = (opt: ComboboxOption | undefined): string => const getLabel = (opt: ComboboxOption | undefined | null): string =>
opt ? (opt.label ?? opt.value) : 'Undefined Option'; opt ? (opt.label ?? opt.value) : 'Undefined Option';
/** returns option preview, falling back to getLabel if missing */ /** returns option preview, falling back to getLabel if missing */
const getPreview = (opt: ComboboxOption | undefined): string => opt?.preview ?? getLabel(opt); const getPreview = (opt: ComboboxOption | undefined | null): string =>
opt?.preview ?? getLabel(opt);
</script> </script>
<script lang="ts"> <script lang="ts">
@@ -78,7 +79,7 @@
stateless?: boolean; stateless?: boolean;
/** Bindable value of the combobox, the currently selected option */ /** Bindable value of the combobox, the currently selected option */
value?: ComboboxOption; value?: ComboboxOption | null;
/** Array of ComboboxOptions for the picker */ /** Array of ComboboxOptions for the picker */
options: ComboboxOption[]; options: ComboboxOption[];
/** /**
@@ -271,7 +272,7 @@
}); });
/** currently highlighted option, updated by keyboard navigation or defaults to first item */ /** currently highlighted option, updated by keyboard navigation or defaults to first item */
let highlighted = $derived.by((): ComboboxOption | undefined => { let highlighted = $derived.by((): ComboboxOption | undefined | null => {
if (!searching) return undefined; // otherwise, the first item is highlighted on first open if (!searching) return undefined; // otherwise, the first item is highlighted on first open
if (filteredItems.length === 0) return undefined; if (filteredItems.length === 0) return undefined;
if (value !== undefined && filteredItems.find((v) => v.value === value?.value)) return value; if (value !== undefined && filteredItems.find((v) => v.value === value?.value)) return value;