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