From ed97f09aad16f26a3c77a54c91d8fed708c2d622 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Thu, 5 Feb 2026 10:31:24 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20fix=20focus=20restore?=
 =?UTF-8?q?=20for=20chevron=20menus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ensure focus returns to camera chevron after effects panel closes.
---
 .../components/controls/Device/VideoDeviceControl.tsx       | 1 +
 .../features/rooms/livekit/components/effects/Effects.tsx   | 3 +++
 .../src/features/rooms/livekit/hooks/useSidePanel.ts        | 6 ++++++
 src/frontend/src/primitives/Popover.tsx                     | 3 ++-
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx
index 800fa89f..2c214265 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx
@@ -152,6 +152,7 @@ export const VideoDeviceControl = ({
           </Button>
           {({ close }) => (
             <div
+              data-attr="camera-menu-popover"
               className={css({
                 maxWidth: '36rem',
                 padding: '0.15rem',
diff --git a/src/frontend/src/features/rooms/livekit/components/effects/Effects.tsx b/src/frontend/src/features/rooms/livekit/components/effects/Effects.tsx
index 4c6f0ac0..85ce5635 100644
--- a/src/frontend/src/features/rooms/livekit/components/effects/Effects.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/effects/Effects.tsx
@@ -25,6 +25,9 @@ export const Effects = () => {
       if (activeEl?.tagName === 'DIV') {
         return getTrigger('options') ?? activeEl
       }
+      if (activeEl?.closest('[data-attr="camera-menu-popover"]')) {
+        return getTrigger('cameraMenu') ?? activeEl
+      }
       // For direct button clicks, use the active element as is
       return activeEl
     },
diff --git a/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts b/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts
index 831a7049..2cd63c49 100644
--- a/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts
+++ b/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts
@@ -30,6 +30,12 @@ export const useSidePanel = () => {
         return layoutStore.sidePanelTriggers.options ?? activeEl
       }
     }
+    if (
+      panelId === PanelId.EFFECTS &&
+      activeEl?.closest('[data-attr="camera-menu-popover"]')
+    ) {
+      return layoutStore.sidePanelTriggers.cameraMenu ?? activeEl
+    }
     const triggerKeyByPanel: Partial<Record<PanelId, SidePanelTriggerKey>> = {
       [PanelId.PARTICIPANTS]: 'participants',
       [PanelId.TOOLS]: 'tools',
diff --git a/src/frontend/src/primitives/Popover.tsx b/src/frontend/src/primitives/Popover.tsx
index ebea9459..8ed755c9 100644
--- a/src/frontend/src/primitives/Popover.tsx
+++ b/src/frontend/src/primitives/Popover.tsx
@@ -138,7 +138,8 @@ export const Popover = ({
   }
 
   useEffect(() => {
-    if (!effectiveOpen || !focusOnOpen) return
+    const wasOpen = prevOpenRef.current
+    if (wasOpen || !effectiveOpen || !focusOnOpen) return
     const first = popoverContentRef.current?.querySelector<HTMLElement>(
       focusOnOpen.selector
     )