From 2dfe4828614229ba7eb4b20887325ea50948fdde Mon Sep 17 00:00:00 2001
From: Trezy <tre@trezy.com>
Date: Mon, 20 Apr 2026 14:19:11 +0000
Subject: [PATCH] fix(dashboard): fix broken interactivity on collection combobox

---
 web/src/app/dashboard/backfill/page.tsx | 25 ++++++++++++++++++-------
 web/src/components/ui/combobox.tsx | 42 +++++++++++++++++++++---------------------
 2 file(s) changed, 39 insertion(s)(+), 28 deletion(s)(-)

diff --git a/web/src/app/dashboard/backfill/page.tsx b/web/src/app/dashboard/backfill/page.tsx
--- a/web/src/app/dashboard/backfill/page.tsx
+++ b/web/src/app/dashboard/backfill/page.tsx
@@ -174,7 +174,14 @@ <ResponsiveDialog open={open} onOpenChange={setOpen}>
       <ResponsiveDialogTrigger asChild>
         <Button>Create Backfill Job</Button>
       </ResponsiveDialogTrigger>
-      <ResponsiveDialogContent>
+      <ResponsiveDialogContent
+        onInteractOutside={(e) => {
+          const target = e.target as HTMLElement;
+          if (target.closest("[data-slot='combobox-item'], [data-slot='combobox-content']")) {
+            e.preventDefault();
+          }
+        }}
+      >
         <ResponsiveDialogHeader>
           <ResponsiveDialogTitle>Create Backfill Job</ResponsiveDialogTitle>
           <ResponsiveDialogDescription>
@@ -186,19 +193,23 @@ <div className="flex flex-col gap-4">
           {error && <p className="text-destructive text-sm">{error}</p>}
           <div className="flex flex-col gap-2">
             <Label>Collection (optional)</Label>
-            <Combobox value={collection} onValueChange={setCollection}>
+            <Combobox
+              value={collection}
+              onValueChange={setCollection}
+              items={recordLexicons}
+            >
               <ComboboxInput
                 placeholder="Select or type a collection..."
                 showClear
               />
               <ComboboxContent>
+                <ComboboxEmpty>No matching lexicons.</ComboboxEmpty>
                 <ComboboxList>
-                  <ComboboxEmpty>No matching lexicons.</ComboboxEmpty>
-                  {recordLexicons.map((id) => (
-                    <ComboboxItem key={id} value={id}>
-                      {id}
+                  {(item: string) => (
+                    <ComboboxItem key={item} value={item}>
+                      {item}
                     </ComboboxItem>
-                  ))}
+                  )}
                 </ComboboxList>
               </ComboboxContent>
             </Combobox>
diff --git a/web/src/components/ui/combobox.tsx b/web/src/components/ui/combobox.tsx
--- a/web/src/components/ui/combobox.tsx
+++ b/web/src/components/ui/combobox.tsx
@@ -102,28 +102,28 @@ Pick<
     ComboboxPrimitive.Positioner.Props,
     "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
   >) {
-  return (
-    <ComboboxPrimitive.Portal>
-      <ComboboxPrimitive.Positioner
-        side={side}
-        sideOffset={sideOffset}
-        align={align}
-        alignOffset={alignOffset}
-        anchor={anchor}
-        className="isolate z-50"
-      >
-        <ComboboxPrimitive.Popup
-          data-slot="combobox-content"
-          data-chips={!!anchor}
-          className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none",
-            className
-          )}
-          {...props}
-        />
-      </ComboboxPrimitive.Positioner>
-    </ComboboxPrimitive.Portal>
+  const content = (
+    <ComboboxPrimitive.Positioner
+      side={side}
+      sideOffset={sideOffset}
+      align={align}
+      alignOffset={alignOffset}
+      anchor={anchor}
+      className="pointer-events-auto isolate z-50"
+    >
+      <ComboboxPrimitive.Popup
+        data-slot="combobox-content"
+        data-chips={!!anchor}
+        className={cn(
+          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none",
+          className
+        )}
+        {...props}
+      />
+    </ComboboxPrimitive.Positioner>
   )
+
+  return <ComboboxPrimitive.Portal>{content}</ComboboxPrimitive.Portal>
 }
 
 function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {

--
tangled.sh