From b81da79cf2eeafe8ffe77dfb15447bac04f2861e Mon Sep 17 00:00:00 2001
From: Decobus <deco@deco.sh>
Date: Sun, 20 Jul 2025 01:59:45 -0400
Subject: [PATCH] Implement React Portal for dropdown to escape stacking
 contexts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Complete rewrite of dropdown positioning using React Portal:
- Renders dropdown in document.body via createPortal
- Uses fixed positioning with calculated coordinates
- Completely bypasses all CSS stacking contexts
- Includes proper SSR handling with mounted state
- Maintains click-outside detection for both button and menu

This should definitively solve the dropdown layering issue by rendering
the dropdown outside any parent containers with backdrop-filter.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/Dropdown.tsx | 120 ++++++++++++++++++++++++++--------------
 1 file changed, 78 insertions(+), 42 deletions(-)

diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index a3bcc7f..7ef8199 100644
--- a/components/Dropdown.tsx
+++ b/components/Dropdown.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useRef, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 type DropdownProps = {
   options: Array<{ id: number; name: string }>;
@@ -20,12 +21,19 @@ export default function Dropdown({
   onToggle,
 }: DropdownProps) {
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setIsOpen] = useState(controlledIsOpen ?? false);
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (!dropdownRef.current || !(event.target instanceof Node)) return;
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      if (!dropdownRef.current || !buttonRef.current || !(event.target instanceof Node)) return;
+      if (!dropdownRef.current.contains(event.target) && !buttonRef.current.contains(event.target)) {
         if (onToggle) onToggle(false);
         else setIsOpen(false);
       }
@@ -40,6 +48,17 @@ export default function Dropdown({
     };
   }, [controlledIsOpen, isOpen, onToggle]);
 
+  useEffect(() => {
+    if ((controlledIsOpen ?? isOpen) && buttonRef.current && mounted) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + window.scrollY + 4,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      });
+    }
+  }, [controlledIsOpen, isOpen, mounted]);
+
   const activeOption = options.find((option) => option.id === activeId) || null;
 
   const handleSelect = (option: { id: number }) => {
@@ -53,48 +72,65 @@ export default function Dropdown({
     else setIsOpen((prev) => !prev);
   };
 
-  return (
-    <div className="relative w-full" ref={dropdownRef} style={{ zIndex: 9999 }}>
-      <button
-        type="button"
-        onClick={toggleDropdown}
-        className="dropdown-button"
-      >
-        <span>
-          {activeOption ? activeOption.name : label}
-        </span>
-        <svg
-          className={`icon-sm transition-transform duration-200 ${(controlledIsOpen ?? isOpen) ? 'rotate-180' : ''}`}
-          fill="currentColor"
-          viewBox="0 0 20 20"
-        >
-          <path
-            fillRule="evenodd"
-            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a 1 1 0 01-1.414 0l-4-4a 1 1 0 010-1.414z"
-            clipRule="evenodd"
-          />
-        </svg>
-      </button>
-
-      {(controlledIsOpen ?? isOpen) && (
-        <div className="absolute top-full left-0 w-full dropdown-menu" style={{ zIndex: 9999 }}>
-          {options.length === 0 ? (
-            <div className="dropdown-item text-center">
-              No teams available
-            </div>
-          ) : (
-            options.map((option) => (
-              <div
-                key={option.id}
-                onClick={() => handleSelect(option)}
-                className={`dropdown-item ${activeOption?.id === option.id ? 'active' : ''}`}
-              >
-                {option.name}
-              </div>
-            ))
-          )}
+  const dropdownMenu = (controlledIsOpen ?? isOpen) && mounted ? (
+    <div 
+      ref={dropdownRef}
+      className="dropdown-menu"
+      style={{
+        position: 'fixed',
+        top: dropdownPosition.top,
+        left: dropdownPosition.left,
+        width: dropdownPosition.width,
+        zIndex: 999999
+      }}
+    >
+      {options.length === 0 ? (
+        <div className="dropdown-item text-center">
+          No teams available
         </div>
+      ) : (
+        options.map((option) => (
+          <div
+            key={option.id}
+            onClick={() => handleSelect(option)}
+            className={`dropdown-item ${activeOption?.id === option.id ? 'active' : ''}`}
+          >
+            {option.name}
+          </div>
+        ))
       )}
     </div>
+  ) : null;
+
+  return (
+    <>
+      <div className="relative w-full">
+        <button
+          ref={buttonRef}
+          type="button"
+          onClick={toggleDropdown}
+          className="dropdown-button"
+        >
+          <span>
+            {activeOption ? activeOption.name : label}
+          </span>
+          <svg
+            className={`icon-sm transition-transform duration-200 ${(controlledIsOpen ?? isOpen) ? 'rotate-180' : ''}`}
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              fillRule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a 1 1 0 01-1.414 0l-4-4a 1 1 0 010-1.414z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+      
+      {mounted && typeof document !== 'undefined' && dropdownMenu ? 
+        createPortal(dropdownMenu, document.body) : null
+      }
+    </>
   );
 }
\ No newline at end of file