fix(organizations): keep the rename draft until it is saved or cancelled

Author: waleedlatif1

apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-header/organization-header.tsx

@@ -23,6 +23,7 @@ import { LOGO_ACCEPT_ATTRIBUTE } from '@/lib/uploads/client/logo-file'
 import { InviteModal } from '@/app/workspace/[workspaceId]/components/invite-modal'
 import { SidebarRenameRow } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-rename-row'
 import { SIDEBAR_RAIL_CHIP_CLASS } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
+import { holdRowFocus } from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
 import { useRenameOrganization } from '@/hooks/queries/organization'
 import { useUploadOrganizationLogo } from '@/hooks/queries/organization-logo'
 
@@ -56,12 +57,14 @@ export function OrganizationHeader({
   onExpandSidebar,
 }: OrganizationHeaderProps) {
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const nameInputRef = useRef<HTMLInputElement>(null)
   const router = useRouter()
   const { mutate: uploadLogo, isPending: isUploadingLogo } = useUploadOrganizationLogo(
     organization.id
   )
   const renameOrganization = useRenameOrganization()
   const [isInviteModalOpen, setIsInviteModalOpen] = useState(false)
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [draftName, setDraftName] = useState<string | null>(null)
   const initial = getOrganizationInitial(organization.name)
 
@@ -104,7 +107,13 @@ export function OrganizationHeader({
       stopRenaming()
       return
     }
-    renameOrganization.mutate({ orgId: organization.id, name }, { onSuccess: stopRenaming })
+    renameOrganization.mutate(
+      { orgId: organization.id, name },
+      {
+        onSuccess: stopRenaming,
+        onError: () => requestAnimationFrame(() => nameInputRef.current?.focus()),
+      }
+    )
   }
 
   const logo = (
@@ -133,8 +142,11 @@ export function OrganizationHeader({
         />
       )}
       <DropdownMenu
+        open={isMenuOpen}
         onOpenChange={(open) => {
-          if (!open) stopRenaming()
+          // The input's blur saves the draft; closing now would unmount it and hide a failure.
+          if (!open && draftName !== null) return
+          setIsMenuOpen(open)
         }}
       >
         <DropdownMenuTrigger asChild>
@@ -152,6 +164,8 @@ export function OrganizationHeader({
           side='bottom'
           sideOffset={8}
           className='w-64 max-w-[calc(100vw-24px)]'
+          onPointerMoveCapture={draftName !== null ? holdRowFocus : undefined}
+          onPointerOutCapture={draftName !== null ? holdRowFocus : undefined}
         >
           <div className='flex items-center gap-2 px-2 py-1.5'>
             {canEditIdentity ? (
@@ -179,6 +193,7 @@ export function OrganizationHeader({
             <div className='flex min-w-0 flex-1 flex-col'>
               {draftName !== null ? (
                 <SidebarRenameRow
+                  ref={nameInputRef}
                   aria-label='Organization name'
                   aria-invalid={renameOrganization.isError || undefined}
                   autoFocus

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx

@@ -29,7 +29,10 @@ import {
   SIDEBAR_RAIL_CHIP_CLASS,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 import type { useHoverMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
-import { interleaveSiblings } from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
+import {
+  holdRowFocus,
+  interleaveSiblings,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
 import type { FolderTreeNode } from '@/stores/folders/types'
 import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
 
@@ -217,15 +220,6 @@ interface CollapsedWorkflowFlyoutItemProps {
   canRename?: boolean
 }
 
-/**
- * Prevents Radix's mouse pointer handlers from transferring focus. Row handlers keep
- * actions submenus open; content capture handlers preserve inline rename focus,
- * including inside portaled folders. Radix skips handlers for defaulted events.
- */
-const holdRowFocus = (e: React.PointerEvent) => {
-  if (e.pointerType === 'mouse') e.preventDefault()
-}
-
 const EDIT_ROW_CLASS = cn(
   chipVariants({ active: true, fullWidth: true }),
   'min-w-0 cursor-default select-none text-small'

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/utils.ts

@@ -1,10 +1,19 @@
-import type { MouseEvent } from 'react'
+import type { MouseEvent, PointerEvent } from 'react'
 import type { MothershipResource } from '@/lib/mothership/resource-types'
 import { getFolderMap } from '@/hooks/queries/utils/folder-cache'
 import { getWorkflows } from '@/hooks/queries/utils/workflow-cache'
 import type { FolderTreeNode } from '@/stores/folders/types'
 import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
 
+/**
+ * Prevents Radix's mouse pointer handlers from transferring focus. Row handlers keep
+ * actions submenus open; content capture handlers preserve inline rename focus,
+ * including inside portaled folders. Radix skips handlers for defaulted events.
+ */
+export function holdRowFocus(event: PointerEvent) {
+  if (event.pointerType === 'mouse') event.preventDefault()
+}
+
 /** Distinguishes sidebar background clicks from controls and portaled overlays. */
 export function isSidebarBackgroundClick(event: MouseEvent<HTMLElement>): boolean {
   return (