fix(search-field demo): close popover after pick without reopening on refocus

`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>
active-uix
dev 5 months ago
parent 82349f15b4
commit 99a1f05cd7

@ -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>

Loading…
Cancel
Save

Powered by TurnKey Linux.