src/shared/ui/SearchBar/SearchBar.svelte

@@ -1,3 +1,10 @@
+<!--
+    Component: SearchBar
+
+    Search input with popover dropdown for results/suggestions
+    - Features keyboard navigation (ArrowDown/Up/Enter) and auto-focus prevention on popover open.
+    - The input field serves as the popover trigger.
+-->
 <script lang="ts">
 import { Input } from '$shared/shadcn/ui/input';
 import { Label } from '$shared/shadcn/ui/label';
@@ -7,17 +14,20 @@ import {
     Trigger as PopoverTrigger,
 } from '$shared/shadcn/ui/popover';
 import { useId } from 'bits-ui';
-import {
-    type Snippet,
-    tick,
-} from 'svelte';
+import type { Snippet } from 'svelte';
 
 interface Props {
+    /** Unique identifier for the input element */
     id: string;
+    /** Current search value (bindable) */
     value: string;
+    /** Additional CSS classes for the container */
     class?: string;
+    /** Placeholder text for the input */
     placeholder?: string;
+    /** Optional label displayed above the input */
     label?: string;
+    /** Content to render inside the popover (receives unique content ID) */
     children: Snippet<[{ id: string }]> | undefined;
 }
 
@@ -35,13 +45,6 @@ let triggerRef = $state<HTMLInputElement>(null!);
 // svelte-ignore state_referenced_locally
 const contentId = useId(id);
 
-function closeAndFocusTrigger() {
-    open = false;
-    tick().then(() => {
-        triggerRef?.focus();
-    });
-}
-
 function handleKeyDown(event: KeyboardEvent) {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {
         event.preventDefault();
@@ -50,16 +53,14 @@ function handleKeyDown(event: KeyboardEvent) {
 
 function handleInputClick() {
     open = true;
-    tick().then(() => {
-        triggerRef?.focus();
-    });
 }
 </script>
 
-<PopoverRoot>
+<PopoverRoot bind:open>
     <PopoverTrigger bind:ref={triggerRef}>
         {#snippet child({ props })}
-            <div {...props} class="flex flex-row flex-1 w-full">
+            {@const { onclick, ...rest } = props}
+            <div {...rest} class="flex flex-row flex-1 w-full">
                 {#if label}
                     <Label for={id}>{label}</Label>
                 {/if}
@@ -68,6 +69,7 @@ function handleInputClick() {
                     placeholder={placeholder}
                     bind:value={value}
                     onkeydown={handleKeyDown}
+                    onclick={handleInputClick}
                     class="flex flex-row flex-1"
                 />
             </div>
@@ -76,7 +78,12 @@ function handleInputClick() {
 
     <PopoverContent
         onOpenAutoFocus={e => e.preventDefault()}
-        class="w-max"
+        onInteractOutside={(e => {
+            if (e.target === triggerRef) {
+                e.preventDefault();
+            }
+        })}
+        class="w-(--bits-popover-anchor-width) min-w-(--bits-popover-anchor-width)"
     >
         {@render children?.({ id: contentId })}
     </PopoverContent>