From 92c8dbd1bf82f52fc1985b697d92d448d6ffc7e6 Mon Sep 17 00:00:00 2001
From: Test <test@test.com>
Date: Fri, 27 Feb 2026 22:46:31 +0100
Subject: [PATCH] fix: restore status dropdown click + color picker per status
 value

The positionDropdown callback ref ran during React's commit phase
before anchorRef was assigned (children refs commit before parents),
so the dropdown was never positioned and the invisible backdrop
stole all subsequent clicks. Switch to useLayoutEffect which runs
after all refs are set.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/StatusDropdown.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/StatusDropdown.tsx b/src/components/StatusDropdown.tsx
index dc3394a6..f7a47066 100644
--- a/src/components/StatusDropdown.tsx
+++ b/src/components/StatusDropdown.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
+import { useState, useRef, useEffect, useLayoutEffect, useCallback, useMemo } from 'react'
 import { createPortal } from 'react-dom'
 import { getStatusStyle, SUGGESTED_STATUSES, setStatusColor, getStatusColorKey } from '../utils/statusStyles'
 import { ACCENT_COLORS } from '../utils/typeColors'
@@ -229,8 +229,10 @@ export function StatusDropdown({
   const inputRef = useRef<HTMLInputElement>(null)
   const listRef = useRef<HTMLDivElement>(null)
   const anchorRef = useRef<HTMLDivElement>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
 
-  const positionDropdown = useCallback((node: HTMLDivElement | null) => {
+  useLayoutEffect(() => {
+    const node = dropdownRef.current
     if (!node) return
     const anchor = anchorRef.current?.parentElement
     if (!anchor) return
@@ -288,7 +290,7 @@ export function StatusDropdown({
         <>
           <div className="fixed inset-0 z-[12000]" onClick={onCancel} data-testid="status-dropdown-backdrop" />
           <div
-            ref={positionDropdown}
+            ref={dropdownRef}
             className="fixed z-[12001] w-52 overflow-hidden rounded-lg border border-border bg-background shadow-lg"
             data-testid="status-dropdown-popover"
           >