@r2digisolutions/components 0.14.12 → 0.14.14

package/dist/components/molecules/Combobox/Combobox.svelte

@@ -70,6 +70,7 @@
 	let popoverEl = $state<HTMLDivElement | null>(null);
 	let inputEl = $state<HTMLInputElement | null>(null);
 	let highlighted = $state(0);
+	let openingGesture = $state(false);
 	let childEntries = $state<{ id: number; value: string; disabled: boolean; label: string }[]>([]);
 	let nextChildId = 0;
 	const uid = $props.id();
@@ -163,8 +164,32 @@
 		}
 	}
 
+	function onDocPointerDown(event: PointerEvent) {
+		if (!open || openingGesture) return;
+		const target = event.target;
+		if (!(target instanceof Node)) return;
+		if (rootEl?.contains(target) || popoverEl?.contains(target)) return;
+		setOpen(false);
+	}
+
+	function markOpeningGesture() {
+		openingGesture = true;
+		queueMicrotask(() => {
+			openingGesture = false;
+		});
+	}
+
+	function commitPendingQuery() {
+		const trimmed = query.trim();
+		if (!creatable || !trimmed || trimmed === value) return;
+		value = trimmed;
+		onchange?.(trimmed);
+	}
+
 	function onPopoverClose() {
+		commitPendingQuery();
 		if (selected) query = selected.label;
+		else if (value) query = value;
 		else if (!creatable) query = '';
 	}
 
@@ -194,6 +219,7 @@
 
 	function setOpen(next: boolean) {
 		if (disabled) return;
+		if (next) markOpeningGesture();
 		open = next;
 		if (next) {
 			highlighted = 0;
@@ -283,8 +309,11 @@
 	}
 
 	$effect(() => {
-		if (selected && !open && query !== selected.label) {
+		if (open) return;
+		if (selected && query !== selected.label) {
 			query = selected.label;
+		} else if (value && query !== value) {
+			query = value;
 		}
 	});
 
@@ -307,11 +336,17 @@
 
 		const offScroll = on(window, 'scroll', reposition, { capture: true, passive: true });
 		const offResize = on(window, 'resize', reposition);
+		// Defer past the opening click — same gesture must not count as outside.
+		const timer = window.setTimeout(() => {
+			document.addEventListener('pointerdown', onDocPointerDown, true);
+		}, 0);
 
 		return () => {
 			cancelAnimationFrame(frame);
 			offScroll();
 			offResize();
+			window.clearTimeout(timer);
+			document.removeEventListener('pointerdown', onDocPointerDown, true);
 		};
 	});
 
@@ -407,17 +442,16 @@
 	<div
 		bind:this={popoverEl}
 		id={listboxId}
-		popover="auto"
+		popover="manual"
 		role="listbox"
 		onbeforetoggle={handleBeforeToggle}
 		ontoggle={handleToggle}
 		class="combobox-popover inset-auto m-0 overflow-y-auto rounded-xl border border-border bg-surface-elevated p-1.5 shadow-xl outline-none"
 	>
-		{#if open}
-			{#if !hasRows}
-				<div class="px-3 py-2.5 text-xs text-muted text-center">{emptyText}</div>
-			{:else}
-				{#each items as item, index (itemKey(item))}
+		{#if !hasRows}
+			<div class="px-3 py-2.5 text-xs text-muted text-center">{emptyText}</div>
+		{:else}
+			{#each items as item, index (itemKey(item))}
 					{#if item.kind === 'create'}
 						<ComboboxItem
 							value={COMBOBOX_CREATE_KEY}
@@ -465,7 +499,6 @@
 				{/each}
 				{@render children?.()}
 			{/if}
-		{/if}
 	</div>
 </div>
 

package/dist/components/molecules/FormCombobox/FormCombobox.svelte

@@ -75,8 +75,9 @@
 	}
 </script>
 
-<div class={['w-full space-y-1', className]}>
+<div class="w-full space-y-1">
 	<Combobox
+		class={className}
 		{label}
 		{placeholder}
 		{options}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.14.12",
+	"version": "0.14.14",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",