From 3fdf9815c8236e1cef9d9160637d60bca72e9130 Mon Sep 17 00:00:00 2001
From: Jo D <dev-jodee@users.noreply.github.com>
Date: Tue, 2 Jun 2026 08:58:51 -0400
Subject: [PATCH] fix(webapp): keep select dropdowns usable inside dialogs

Modal dialogs (Radix react-remove-scroll + pointer-events lockout) broke
the portaled base-ui Select popups: options weren't clickable, the list
couldn't wheel-scroll, and clicking an option dismissed the dialog.

Mark dialogs that contain Selects as non-modal, re-enable pointer events
on listbox popups, and ignore outside-interactions that originate from a
select popup so the dialog stays open on selection.
---
 .../delegation/create-delegation-dialog.tsx       |  2 +-
 webapp/src/components/plan/create-plan-dialog.tsx |  2 +-
 webapp/src/components/plan/plan-card.tsx          |  2 +-
 .../components/time-travel/time-travel-button.tsx |  2 +-
 webapp/src/components/ui/dialog.tsx               | 15 ++++++++++++++-
 webapp/src/index.css                              |  4 ++++
 6 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/webapp/src/components/delegation/create-delegation-dialog.tsx b/webapp/src/components/delegation/create-delegation-dialog.tsx
index 4c2f119..ab69f09 100644
--- a/webapp/src/components/delegation/create-delegation-dialog.tsx
+++ b/webapp/src/components/delegation/create-delegation-dialog.tsx
@@ -195,7 +195,7 @@ export function CreateDelegationDialog({ tokenMint, disabled }: CreateDelegation
         (selectedKind === 'fixed' || (periodDays.length > 0 && Number(periodDays) > 0));
 
     return (
-        <Dialog open={open} onOpenChange={handleOpenChange}>
+        <Dialog open={open} onOpenChange={handleOpenChange} modal={false}>
             <DialogTrigger asChild>
                 <SolanaButton
                     disabled={disabled || authorityInitId == null}
diff --git a/webapp/src/components/plan/create-plan-dialog.tsx b/webapp/src/components/plan/create-plan-dialog.tsx
index 2996abd..d9be80a 100644
--- a/webapp/src/components/plan/create-plan-dialog.tsx
+++ b/webapp/src/components/plan/create-plan-dialog.tsx
@@ -246,7 +246,7 @@ export function CreatePlanDialog({ open, onOpenChange }: CreatePlanDialogProps)
     );
 
     return (
-        <Dialog open={open} onOpenChange={handleOpenChange}>
+        <Dialog open={open} onOpenChange={handleOpenChange} modal={false}>
             <DialogContent className="sm:max-w-[750px]">
                 <DialogHeader>
                     <DialogTitle>Create Subscription Plan</DialogTitle>
diff --git a/webapp/src/components/plan/plan-card.tsx b/webapp/src/components/plan/plan-card.tsx
index e30eab8..9335042 100644
--- a/webapp/src/components/plan/plan-card.tsx
+++ b/webapp/src/components/plan/plan-card.tsx
@@ -153,7 +153,7 @@ function EditPlanDialog({
         (endTsComputed === 0 || blockTime !== undefined);
 
     return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
+        <Dialog open={open} onOpenChange={onOpenChange} modal={false}>
             <DialogContent className="sm:max-w-[750px]">
                 <DialogHeader>
                     <DialogTitle>Edit Plan: {meta.n || 'Unnamed'}</DialogTitle>
diff --git a/webapp/src/components/time-travel/time-travel-button.tsx b/webapp/src/components/time-travel/time-travel-button.tsx
index d5f4155..9463cbc 100644
--- a/webapp/src/components/time-travel/time-travel-button.tsx
+++ b/webapp/src/components/time-travel/time-travel-button.tsx
@@ -147,7 +147,7 @@ function TimeTravelButtonInner() {
     };
 
     return (
-        <Dialog open={open} onOpenChange={setOpen}>
+        <Dialog open={open} onOpenChange={setOpen} modal={false}>
             <DialogTrigger asChild>
                 <Button
                     variant="outline"
diff --git a/webapp/src/components/ui/dialog.tsx b/webapp/src/components/ui/dialog.tsx
index f40ecbc..237bcbb 100644
--- a/webapp/src/components/ui/dialog.tsx
+++ b/webapp/src/components/ui/dialog.tsx
@@ -33,7 +33,12 @@ function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dial
     );
 }
 
-function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>) {
+function DialogContent({
+    className,
+    children,
+    onInteractOutside,
+    ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
     return (
         <DialogPortal data-slot="dialog-portal">
             <DialogOverlay />
@@ -43,6 +48,14 @@ function DialogContent({ className, children, ...props }: React.ComponentProps<t
                     'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
                     className,
                 )}
+                onInteractOutside={event => {
+                    const target = event.detail.originalEvent.target as HTMLElement | null;
+                    if (target?.closest('[role="listbox"], [role="option"]')) {
+                        event.preventDefault();
+                        return;
+                    }
+                    onInteractOutside?.(event);
+                }}
                 {...props}
             >
                 {children}
diff --git a/webapp/src/index.css b/webapp/src/index.css
index a4456ab..c1a5c5a 100644
--- a/webapp/src/index.css
+++ b/webapp/src/index.css
@@ -315,3 +315,7 @@ pre code {
         animation: none;
     }
 }
+
+[role='listbox'] {
+    pointer-events: auto;
+}