From 4f9a6d2d9e77f4b2c673afed8a0c1181072e97e0 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Mon, 27 Apr 2026 23:33:09 +0200
Subject: [PATCH] fix: move logout form outside DropdownMenuContent so
 requestSubmit fires
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UserMenu's hidden logout-form zat binnen <DropdownMenuContent>. Wanneer een
DropdownMenuItem onSelect vuurt, sluit base-ui de menu en unmount het
content-portal in dezelfde tick — waardoor de form verdwijnt voordat
requestSubmit() wordt aangeroepen, en logoutFormRef.current null is.

Form naar top-level van het component verplaatsen (als sibling van DropdownMenu,
binnen Fragment) houdt de ref geldig. Geen DOM-side-effecten — form is hidden,
zat nooit visueel in het menu.

Quality gates: lint 0 errors, tsc clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/shared/user-menu.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/shared/user-menu.tsx b/components/shared/user-menu.tsx
index ba615c0..07d5b38 100644
--- a/components/shared/user-menu.tsx
+++ b/components/shared/user-menu.tsx
@@ -36,8 +36,12 @@ export function UserMenu({ userId, username, email, roles }: UserMenuProps) {
   const logoutFormRef = useRef<HTMLFormElement>(null)
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger
+    <>
+      {/* Form buiten DropdownMenuContent — die unmount op onSelect waardoor de ref
+          null wordt voordat requestSubmit() vuurt. */}
+      <form ref={logoutFormRef} action={logoutAction} className="hidden" />
+      <DropdownMenu>
+        <DropdownMenuTrigger
         className="rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
         aria-label="Accountmenu openen"
       >
@@ -109,8 +113,8 @@ export function UserMenu({ userId, username, email, roles }: UserMenuProps) {
           <LogOut className="mr-2 h-4 w-4" />
           <span>Uitloggen</span>
         </DropdownMenuItem>
-        <form ref={logoutFormRef} action={logoutAction} className="hidden" />
       </DropdownMenuContent>
-    </DropdownMenu>
+      </DropdownMenu>
+    </>
   )
 }