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 stageRef = $state<HTMLElement | null>(null);
let resultsOpen = $state(false); let resultsOpen = $state(false);
let inputRef = $state<HTMLInputElement | null>(null); 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 compiled = compileMorfo(searchFieldMorfo);
const partsList = $derived([...compiled.parts.byKebab.values()]); const partsList = $derived([...compiled.parts.byKebab.values()]);
@ -193,7 +206,7 @@
<Popover bind:open={resultsOpen}> <Popover bind:open={resultsOpen}>
<Popover.Anchor <Popover.Anchor
onfocusin={() => { onfocusin={() => {
if (!disabled && !readonly) resultsOpen = true; if (!disabled && !readonly && !justCommitted) resultsOpen = true;
}} }}
> >
<SearchField <SearchField
@ -260,11 +273,7 @@
<button <button
type="button" type="button"
class="search-field-result" class="search-field-result"
onclick={() => { onclick={() => commitPick(item.name)}
value = item.name;
resultsOpen = false;
inputRef?.focus();
}}
> >
<span class="search-field-result-name">{item.name}</span> <span class="search-field-result-name">{item.name}</span>
<span class="search-field-result-group">{item.group}</span> <span class="search-field-result-group">{item.group}</span>

Loading…
Cancel
Save

Powered by TurnKey Linux.