From c6b20b5b87e826adfb51f2f6365dca2dab0f59a9 Mon Sep 17 00:00:00 2001
From: ved015 <122012786+ved015@users.noreply.github.com>
Date: Fri, 19 Jun 2026 17:46:21 +0000
Subject: [PATCH] Fix delete organization dialog focus race (#1139)

## Summary
- Delay opening the delete organization dialog until after the Danger zone popover begins closing
- Explicitly focus the organization confirmation input when the dialog opens
- Prevent intermittent focus loss where users could not type the org name
---
 .../components/settings/settings-content.tsx  | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/settings/settings-content.tsx b/apps/web/components/settings/settings-content.tsx
index c0f2a167..a2ee63a4 100644
--- a/apps/web/components/settings/settings-content.tsx
+++ b/apps/web/components/settings/settings-content.tsx
@@ -3,7 +3,7 @@
 import { Logo } from "@ui/assets/Logo"
 import { useAuth } from "@lib/auth-context"
 import NovaOrb from "@/components/nova/nova-orb"
-import { useState } from "react"
+import { useRef, useState } from "react"
 import { cn } from "@lib/utils"
 import { dmSansClassName, dmSans125ClassName } from "@/lib/fonts"
 import Account from "@/components/settings/account"
@@ -147,6 +147,7 @@ export function SettingsContent({
 
 	const [isDeleteOrgDialogOpen, setIsDeleteOrgDialogOpen] = useState(false)
 	const [deleteOrgConfirm, setDeleteOrgConfirm] = useState("")
+	const deleteOrgInputRef = useRef<HTMLInputElement>(null)
 	const deleteOrganization = useDeleteOrganization()
 
 	// Only owners can delete the organization.
@@ -166,6 +167,13 @@ export function SettingsContent({
 
 	const [dangerMenuOpen, setDangerMenuOpen] = useState(false)
 
+	const openDeleteOrganizationDialog = () => {
+		setDangerMenuOpen(false)
+		window.requestAnimationFrame(() => {
+			setIsDeleteOrgDialogOpen(true)
+		})
+	}
+
 	const displayName =
 		user?.displayUsername ||
 		localStorageUsername ||
@@ -361,10 +369,7 @@ export function SettingsContent({
 
 										<button
 											type="button"
-											onClick={() => {
-												setDangerMenuOpen(false)
-												setIsDeleteOrgDialogOpen(true)
-											}}
+											onClick={openDeleteOrganizationDialog}
 											className="w-full flex items-center gap-3 rounded-[10px] px-3 py-2 text-left text-[#C73B1B] hover:bg-[#290F0A]/60 transition-colors cursor-pointer"
 										>
 											<Building2 className="size-[16px] shrink-0" />
@@ -602,7 +607,13 @@ export function SettingsContent({
 					if (!open) setDeleteOrgConfirm("")
 				}}
 			>
-				<DialogContent className="sm:max-w-md">
+				<DialogContent
+					className="sm:max-w-md"
+					onOpenAutoFocus={(event) => {
+						event.preventDefault()
+						deleteOrgInputRef.current?.focus()
+					}}
+				>
 					<div className={cn("flex flex-col gap-5 p-1", dmSans125ClassName())}>
 						<div className="flex flex-col gap-1.5">
 							<h2 className="text-[18px] font-semibold text-[#FAFAFA]">
@@ -625,6 +636,7 @@ export function SettingsContent({
 								confirm:
 							</p>
 							<input
+								ref={deleteOrgInputRef}
 								type="text"
 								value={deleteOrgConfirm}
 								onChange={(e) => setDeleteOrgConfirm(e.target.value)}