From 99a1f05cd733575b1d42acfb75da3a56e61218b0 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Fri, 22 May 2026 13:28:51 +0200
Subject: [PATCH] fix(search-field demo): close popover after pick without
 reopening on refocus
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`commitPick()` set `value`, closed the popover, then refocused the
input — but the `onfocusin` on `<Popover.Anchor>` reopened it. Guard
the anchor's open handler with a `justCommitted` flag cleared on the
next microtask so the refocus that follows a pick is ignored.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../uix/components/search-field/+page.svelte  | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/web/routes/uix/components/search-field/+page.svelte b/web/routes/uix/components/search-field/+page.svelte
index 2409fc329..7cb8a4e62 100644
--- a/web/routes/uix/components/search-field/+page.svelte
+++ b/web/routes/uix/components/search-field/+page.svelte
@@ -37,6 +37,19 @@
 	let stageRef = $state<HTMLElement | null>(null);
 	let resultsOpen = $state(false);
 	let inputRef = $state<HTMLInputElement | null>(null);
+	// Set briefly after committing a pick so the input refocus doesn't
+	// re-open the popover we just closed via `onfocusin` on the anchor.
+	let justCommitted = false;
+
+	function commitPick(name: string) {
+		value = name;
+		resultsOpen = false;
+		justCommitted = true;
+		inputRef?.focus();
+		queueMicrotask(() => {
+			justCommitted = false;
+		});
+	}
 
 	const compiled = compileMorfo(searchFieldMorfo);
 	const partsList = $derived([...compiled.parts.byKebab.values()]);
@@ -193,7 +206,7 @@
 				<Popover bind:open={resultsOpen}>
 					<Popover.Anchor
 						onfocusin={() => {
-							if (!disabled && !readonly) resultsOpen = true;
+							if (!disabled && !readonly && !justCommitted) resultsOpen = true;
 						}}
 					>
 						<SearchField
@@ -260,11 +273,7 @@
 												<button
 													type="button"
 													class="search-field-result"
-													onclick={() => {
-														value = item.name;
-														resultsOpen = false;
-														inputRef?.focus();
-													}}
+													onclick={() => commitPick(item.name)}
 												>
 													<span class="search-field-result-name">{item.name}</span>
 													<span class="search-field-result-group">{item.group}</span>