From d04f03b6b1c5800321f9fa641edd42588897186d Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Thu, 4 Jun 2026 01:50:40 -0500
Subject: [PATCH] fix: replace Portal with inline block to avoid Radix
 pointer-event capture

---
 client/components/BillMerchantRules.jsx | 64 ++++++++++---------------
 1 file changed, 26 insertions(+), 38 deletions(-)

diff --git a/client/components/BillMerchantRules.jsx b/client/components/BillMerchantRules.jsx
index 3561cb5..e299196 100644
--- a/client/components/BillMerchantRules.jsx
+++ b/client/components/BillMerchantRules.jsx
@@ -8,7 +8,6 @@ import {
 import { api } from '@/api';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
-import * as Portal from '@radix-ui/react-portal';
 import { Input } from '@/components/ui/input';
 
 // Debounce helper
@@ -256,44 +255,33 @@ export default function BillMerchantRules({ billId, onRulesChanged }) {
           </Button>
         </div>
 
-        {/* Suggestions — rendered in a Portal so the list escapes the BillModal's
-            overflow-y-auto container and is fully clickable regardless of scroll */}
-        {showSuggestions && filteredSuggestions.length > 0 && inputRef.current && (
-          <Portal.Root>
-            <div
-              style={{
-                position: 'fixed',
-                top: inputRef.current.getBoundingClientRect().bottom + 4,
-                left: inputRef.current.getBoundingClientRect().left,
-                width: inputRef.current.getBoundingClientRect().width,
-                zIndex: 9999,
-              }}
-              className="overflow-hidden rounded-lg border border-border/80 bg-card shadow-md"
-            >
-              <p className="border-b border-border/50 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
-                Recent unmatched transactions
-              </p>
-              <div className="max-h-48 overflow-y-auto">
-                {filteredSuggestions.map(s => {
-                  const amountVal = Math.abs(Number(s.amount || 0)) / 100;
-                  return (
-                    <button
-                      key={s.id}
-                      type="button"
-                      className="flex w-full items-center gap-3 px-3 py-2 text-left text-xs hover:bg-muted/50 focus:bg-muted/50 focus:outline-none"
-                      onMouseDown={e => { e.preventDefault(); pickSuggestion(s); }}
-                    >
-                      <Building2 className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                      <span className="min-w-0 flex-1 truncate font-medium">{s.label}</span>
-                      <span className="shrink-0 font-mono text-muted-foreground tabular-nums">
-                        ${amountVal.toFixed(2)}
-                      </span>
-                    </button>
-                  );
-                })}
-              </div>
+        {/* Suggestions — inline block, no absolute positioning.
+            Avoids overflow-y-auto clipping AND Radix Dialog pointer-event capture. */}
+        {showSuggestions && filteredSuggestions.length > 0 && (
+          <div className="overflow-hidden rounded-lg border border-border/80 bg-card shadow-sm">
+            <p className="border-b border-border/50 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+              Recent unmatched transactions
+            </p>
+            <div className="max-h-40 overflow-y-auto">
+              {filteredSuggestions.map(s => {
+                const amountVal = Math.abs(Number(s.amount || 0)) / 100;
+                return (
+                  <button
+                    key={s.id}
+                    type="button"
+                    className="flex w-full items-center gap-3 px-3 py-2 text-left text-xs hover:bg-muted/50 focus:bg-muted/50 focus:outline-none"
+                    onMouseDown={e => { e.preventDefault(); pickSuggestion(s); }}
+                  >
+                    <Building2 className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                    <span className="min-w-0 flex-1 truncate font-medium">{s.label}</span>
+                    <span className="shrink-0 font-mono text-muted-foreground tabular-nums">
+                      ${amountVal.toFixed(2)}
+                    </span>
+                  </button>
+                );
+              })}
             </div>
-          </Portal.Root>
+          </div>
         )}
 
         {/* Conflict warning */}