A lexicon-driven AppView for ATProto.
happyview.dev
backfill
firehose
jetstream
atproto
appview
oauth
lexicon
fix(dashboard): fix broken interactivity on collection combobox
+39
-28
+18
-7
web/src/app/dashboard/backfill/page.tsx
+18
-7
web/src/app/dashboard/backfill/page.tsx
···
174
174
<ResponsiveDialogTrigger asChild>
175
175
<Button>Create Backfill Job</Button>
176
176
</ResponsiveDialogTrigger>
177
-
<ResponsiveDialogContent>
177
+
<ResponsiveDialogContent
178
+
onInteractOutside={(e) => {
179
+
const target = e.target as HTMLElement;
180
+
if (target.closest("[data-slot='combobox-item'], [data-slot='combobox-content']")) {
181
+
e.preventDefault();
182
+
}
183
+
}}
184
+
>
178
185
<ResponsiveDialogHeader>
179
186
<ResponsiveDialogTitle>Create Backfill Job</ResponsiveDialogTitle>
180
187
<ResponsiveDialogDescription>
···
186
193
{error && <p className="text-destructive text-sm">{error}</p>}
187
194
<div className="flex flex-col gap-2">
188
195
<Label>Collection (optional)</Label>
189
-
<Combobox value={collection} onValueChange={setCollection}>
196
+
<Combobox
197
+
value={collection}
198
+
onValueChange={setCollection}
199
+
items={recordLexicons}
200
+
>
190
201
<ComboboxInput
191
202
placeholder="Select or type a collection..."
192
203
showClear
193
204
/>
194
205
<ComboboxContent>
206
+
<ComboboxEmpty>No matching lexicons.</ComboboxEmpty>
195
207
<ComboboxList>
196
-
<ComboboxEmpty>No matching lexicons.</ComboboxEmpty>
197
-
{recordLexicons.map((id) => (
198
-
<ComboboxItem key={id} value={id}>
199
-
{id}
208
+
{(item: string) => (
209
+
<ComboboxItem key={item} value={item}>
210
+
{item}
200
211
</ComboboxItem>
201
-
))}
212
+
)}
202
213
</ComboboxList>
203
214
</ComboboxContent>
204
215
</Combobox>
+21
-21
web/src/components/ui/combobox.tsx
+21
-21
web/src/components/ui/combobox.tsx
···
102
102
ComboboxPrimitive.Positioner.Props,
103
103
"side" | "align" | "sideOffset" | "alignOffset" | "anchor"
104
104
>) {
105
-
return (
106
-
<ComboboxPrimitive.Portal>
107
-
<ComboboxPrimitive.Positioner
108
-
side={side}
109
-
sideOffset={sideOffset}
110
-
align={align}
111
-
alignOffset={alignOffset}
112
-
anchor={anchor}
113
-
className="isolate z-50"
114
-
>
115
-
<ComboboxPrimitive.Popup
116
-
data-slot="combobox-content"
117
-
data-chips={!!anchor}
118
-
className={cn(
119
-
"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",
120
-
className
121
-
)}
122
-
{...props}
123
-
/>
124
-
</ComboboxPrimitive.Positioner>
125
-
</ComboboxPrimitive.Portal>
105
+
const content = (
106
+
<ComboboxPrimitive.Positioner
107
+
side={side}
108
+
sideOffset={sideOffset}
109
+
align={align}
110
+
alignOffset={alignOffset}
111
+
anchor={anchor}
112
+
className="pointer-events-auto isolate z-50"
113
+
>
114
+
<ComboboxPrimitive.Popup
115
+
data-slot="combobox-content"
116
+
data-chips={!!anchor}
117
+
className={cn(
118
+
"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",
119
+
className
120
+
)}
121
+
{...props}
122
+
/>
123
+
</ComboboxPrimitive.Positioner>
126
124
)
125
+
126
+
return <ComboboxPrimitive.Portal>{content}</ComboboxPrimitive.Portal>
127
127
}
128
128
129
129
function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {