From f239b77df93077e40c27cc5c5909e94266571859 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Thu, 3 Sep 2026 18:55:44 -0700
Subject: [PATCH] fix(web): close composer menus when their controls hide
 (#9541)

---
 apps/web/src/components/chat/ChatComposer.tsx | 44 +++++++--
 .../chat/CompactComposerControlsMenu.tsx      | 16 +---
 apps/web/src/components/chat/TraitsPicker.tsx |  7 +-
 .../components/chat/composerProviderState.tsx |  3 +
 .../chat/useComposerMenuState.test.tsx        | 90 +++++++++++++++++++
 .../components/chat/useComposerMenuState.ts   | 12 +++
 6 files changed, 149 insertions(+), 23 deletions(-)
 create mode 100644 apps/web/src/components/chat/useComposerMenuState.test.tsx
 create mode 100644 apps/web/src/components/chat/useComposerMenuState.ts

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index a8d43e7b0a1f0eed09472f60f75f50cd618d6c5b..589ef7350ec13680c1724138d1783296f9fd6121 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -87,6 +87,7 @@ import {
 } from "../../promptStashStore";
 import { ComposerStashBadge } from "./ComposerStashBadge";
 import { ComposerStashMenu } from "./ComposerStashMenu";
+import { useComposerMenuState } from "./useComposerMenuState";
 import {
   ComposerTasksBadge,
   ComposerTasksContent,
@@ -911,10 +912,12 @@ const ComposerFooterModeControls = memo(function ComposerFooterModeControls(prop
   interactionMode: ProviderInteractionMode;
   runtimeMode: RuntimeMode;
   size?: "sm" | "xs";
+  hidden?: boolean;
   onToggleInteractionMode: () => void;
   onRuntimeModeChange: (mode: RuntimeMode) => void;
 }) {
   const size = props.size ?? "sm";
+  const [open, setOpen] = useComposerMenuState(props.hidden);
   const runtimeModeOption = runtimeModeConfig[props.runtimeMode];
   const RuntimeModeIcon = runtimeModeOption.icon;
   const interactionModeTooltip =
@@ -972,6 +975,8 @@ const ComposerFooterModeControls = memo(function ComposerFooterModeControls(prop
 
       <Tooltip>
         <Select
+          open={open}
+          onOpenChange={setOpen}
           value={props.runtimeMode}
           onValueChange={(value) => props.onRuntimeModeChange(value!)}
         >
@@ -2090,10 +2095,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     isComposerOwned: true,
   } satisfies Parameters<typeof renderProviderTraitsPicker>[0];
   const providerTraitsPicker = renderProviderTraitsPicker(providerTraitsPickerInput);
-  const restingProviderTraitsPicker = renderProviderTraitsPicker({
-    ...providerTraitsPickerInput,
-    size: "xs",
-  });
   const {
     controlsRef: restingComposerControlsRef,
     hiddenBlockCount: restingControlsHiddenBlockCount,
@@ -3576,6 +3577,10 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   // to see or change the model without expanding the composer.
   const composerControlsInStrip = isComposerResting || isComposerCollapsedMobile;
   const composerControlsVisibleInStrip = composerControlsInStrip && restingControlsVisible;
+  const composerControlsHidden = composerControlsInStrip && !restingControlsVisible;
+  if (composerControlsHidden && isComposerModelPickerOpen) {
+    setIsComposerModelPickerOpen(false);
+  }
   useLayoutEffect(() => {
     onRestingControlsVisibilityChange(composerControlsVisibleInStrip);
   }, [composerControlsVisibleInStrip, onRestingControlsVisibilityChange]);
@@ -3746,6 +3751,11 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
 
   const restingHiddenBlockCount = composerControlsInStrip ? restingControlsHiddenBlockCount : 0;
   const composerControlsCompact = !composerControlsInStrip && isComposerFooterCompact;
+  const restingProviderTraitsPicker = renderProviderTraitsPicker({
+    ...providerTraitsPickerInput,
+    size: "xs",
+    hidden: composerControlsHidden || restingHiddenBlockCount > 1,
+  });
   const restingBlockDefs = [
     ...(providerTraitsPicker
       ? [
@@ -3768,6 +3778,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
           interactionMode={interactionMode}
           runtimeMode={runtimeMode}
           size={composerControlsInStrip ? "xs" : "sm"}
+          hidden={composerControlsHidden || restingHiddenBlockCount > 0}
           onToggleInteractionMode={toggleInteractionMode}
           onRuntimeModeChange={handleRuntimeModeChange}
         />
@@ -3886,7 +3897,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                 interactionMode={interactionMode}
                 runtimeMode={runtimeMode}
                 size="xs"
-                hidden={hiddenRestingBlockIds.length === 0}
+                hidden={composerControlsHidden || hiddenRestingBlockIds.length === 0}
                 showInteractionModeToggle={
                   planModeUiEnabled && hiddenRestingBlockIds.includes("mode")
                 }
@@ -4436,6 +4447,18 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   // ------------------------------------------------------------------
   // Imperative handle
   // ------------------------------------------------------------------
+  const openModelPicker = useCallback(() => {
+    if (composerControlsHidden) {
+      if (composerBlurFrameRef.current !== null) {
+        window.cancelAnimationFrame(composerBlurFrameRef.current);
+        composerBlurFrameRef.current = null;
+      }
+      setIsComposerScrollCollapsed(false);
+      setIsComposerFocused(true);
+    }
+    setIsComposerModelPickerOpen(true);
+  }, [composerControlsHidden]);
+
   useImperativeHandle(
     composerRef,
     () => ({
@@ -4459,11 +4482,13 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
           "cursor",
           { ensureLeadingBoundary: true, citationCommentAnchor: sourceAnchor },
         ),
-      openModelPicker: () => {
-        setIsComposerModelPickerOpen(true);
-      },
+      openModelPicker,
       toggleModelPicker: () => {
-        setIsComposerModelPickerOpen((open) => !open);
+        if (isComposerModelPickerOpen) {
+          setIsComposerModelPickerOpen(false);
+        } else {
+          openModelPicker();
+        }
       },
       compactContext: compactThreadContext,
       isModelPickerOpen: () => isComposerModelPickerOpen,
@@ -4576,6 +4601,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
       projectSelectionRequired,
       applyPromptReplacement,
       isComposerModelPickerOpen,
+      openModelPicker,
       readComposerSnapshot,
       selectedModel,
       selectedModelOptionsForDispatch,
diff --git a/apps/web/src/components/chat/CompactComposerControlsMenu.tsx b/apps/web/src/components/chat/CompactComposerControlsMenu.tsx
index aa6544bea8e1195652fd0d3f0c59655d90fea20b..039f12d40873562cd4818dc0df46f505686283db 100644
--- a/apps/web/src/components/chat/CompactComposerControlsMenu.tsx
+++ b/apps/web/src/components/chat/CompactComposerControlsMenu.tsx
@@ -1,5 +1,5 @@
 import { ProviderInteractionMode, RuntimeMode } from "@t3tools/contracts";
-import { memo, type ReactNode, useState } from "react";
+import { memo, type ReactNode } from "react";
 import { EllipsisIcon } from "lucide-react";
 import {
   Menu,
@@ -11,6 +11,7 @@ import {
 } from "../ui/menu";
 import { ComposerControl, ComposerControlIcon } from "./ComposerControl";
 import { composerFloatingLayerProps } from "./composerEventScope";
+import { useComposerMenuState } from "./useComposerMenuState";
 
 export const CompactComposerControlsMenu = memo(function CompactComposerControlsMenu(props: {
   interactionMode: ProviderInteractionMode;
@@ -28,19 +29,10 @@ export const CompactComposerControlsMenu = memo(function CompactComposerControls
   onRuntimeModeChange: (mode: RuntimeMode) => void;
 }) {
   const size = props.size ?? "sm";
-  const [open, setOpen] = useState(false);
-  const hidden = props.hidden ?? false;
-  // Base UI does not report a close it did not initiate, so clear the state
-  // when the trigger hides or the menu would reopen by itself when the
-  // trigger returns.
-  const [wasHidden, setWasHidden] = useState(hidden);
-  if (hidden !== wasHidden) {
-    setWasHidden(hidden);
-    if (hidden) setOpen(false);
-  }
+  const [open, setOpen] = useComposerMenuState(props.hidden);
 
   return (
-    <Menu open={open && !hidden} onOpenChange={setOpen}>
+    <Menu open={open} onOpenChange={setOpen}>
       <MenuTrigger
         render={
           <ComposerControl
diff --git a/apps/web/src/components/chat/TraitsPicker.tsx b/apps/web/src/components/chat/TraitsPicker.tsx
index c48b8eb0f6cf5680bb3c50fd4380117db6e45c61..47ce59efde52b28bdd9928802b2ac16129e96513 100644
--- a/apps/web/src/components/chat/TraitsPicker.tsx
+++ b/apps/web/src/components/chat/TraitsPicker.tsx
@@ -15,7 +15,7 @@ import {
   isClaudeUltrathinkPrompt,
   normalizeModelSlug,
 } from "@t3tools/shared/model";
-import { memo, useCallback, useState } from "react";
+import { memo, useCallback } from "react";
 import type { VariantProps } from "class-variance-authority";
 import { ZapIcon } from "lucide-react";
 import { buttonVariants } from "../ui/button";
@@ -39,6 +39,7 @@ import {
   type ComposerControlSize,
 } from "./ComposerControl";
 import { composerFloatingLayerProps } from "./composerEventScope";
+import { useComposerMenuState } from "./useComposerMenuState";
 
 type ProviderOptions = ReadonlyArray<ProviderOptionSelection>;
 
@@ -549,12 +550,14 @@ export const TraitsPicker = memo(function TraitsPicker({
   triggerClassName,
   isComposerOwned,
   size = "sm",
+  hidden = false,
   ...persistence
 }: TraitsMenuContentProps &
   TraitsPersistence & {
     size?: ComposerControlSize;
+    hidden?: boolean;
   }) {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useComposerMenuState(hidden);
   const { descriptors, primarySelectDescriptor, ultrathinkPromptControlled } =
     getTraitsSectionVisibility({
       provider,
diff --git a/apps/web/src/components/chat/composerProviderState.tsx b/apps/web/src/components/chat/composerProviderState.tsx
index 9a3675885083303e201251b21912dc5512589393..e2fee32d6d06a2457d234362d954c052621919e5 100644
--- a/apps/web/src/components/chat/composerProviderState.tsx
+++ b/apps/web/src/components/chat/composerProviderState.tsx
@@ -53,6 +53,7 @@ type TraitsRenderInput = {
   onPromptChange: (prompt: string) => void;
   planModeEnabled: boolean;
   size?: ComposerControlSize;
+  hidden?: boolean;
   triggerVariant?: VariantProps<typeof buttonVariants>["variant"];
   triggerClassName?: string;
   isComposerOwned?: boolean;
@@ -131,6 +132,7 @@ function renderTraitsControl(
     onPromptChange,
     planModeEnabled,
     size,
+    hidden,
     triggerVariant,
     triggerClassName,
     isComposerOwned,
@@ -162,6 +164,7 @@ function renderTraitsControl(
       onPromptChange={onPromptChange}
       planModeEnabled={planModeEnabled}
       {...(size !== undefined ? { size } : {})}
+      {...(hidden !== undefined ? { hidden } : {})}
       {...(triggerVariant !== undefined ? { triggerVariant } : {})}
       {...(triggerClassName !== undefined ? { triggerClassName } : {})}
       {...(isComposerOwned ? { isComposerOwned } : {})}
diff --git a/apps/web/src/components/chat/useComposerMenuState.test.tsx b/apps/web/src/components/chat/useComposerMenuState.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f24585dfee9340a5d41c1af6e7a96cd70a8a4454
--- /dev/null
+++ b/apps/web/src/components/chat/useComposerMenuState.test.tsx
@@ -0,0 +1,90 @@
+import { act, StrictMode, useLayoutEffect } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
+
+import { useComposerMenuState } from "./useComposerMenuState";
+
+let root: Root;
+let setOpen: ReturnType<typeof useComposerMenuState>[1];
+let committedOpen: boolean[];
+let closePopup = vi.fn<() => void>();
+
+function MenuStateProbe({ hidden }: { hidden: boolean }) {
+  const [open, updateOpen] = useComposerMenuState(hidden);
+  useLayoutEffect(() => {
+    setOpen = updateOpen;
+    committedOpen.push(open);
+    if (open) return closePopup;
+  }, [open, updateOpen]);
+  return null;
+}
+
+async function renderMenu(hidden: boolean) {
+  await act(() => {
+    root.render(
+      <StrictMode>
+        <MenuStateProbe hidden={hidden} />
+      </StrictMode>,
+    );
+  });
+}
+
+beforeEach(() => {
+  // The probe renders no host nodes, but ReactDOM still needs an event target.
+  const document = {
+    nodeType: 9,
+    addEventListener() {},
+    removeEventListener() {},
+  };
+  const container = {
+    nodeType: 1,
+    tagName: "DIV",
+    namespaceURI: "http://www.w3.org/1999/xhtml",
+    ownerDocument: document,
+    addEventListener() {},
+    removeEventListener() {},
+  };
+  vi.stubGlobal("document", document);
+  vi.stubGlobal("window", { document, HTMLIFrameElement: EventTarget });
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  committedOpen = [];
+  closePopup = vi.fn();
+  root = createRoot(container as unknown as HTMLElement);
+});
+
+afterEach(async () => {
+  await act(() => root.unmount());
+  vi.unstubAllGlobals();
+});
+
+describe("useComposerMenuState", () => {
+  it("closes an open popup when its trigger hides and does not reopen when it returns", async () => {
+    await renderMenu(false);
+    await act(() => setOpen(true));
+    expect(committedOpen.at(-1)).toBe(true);
+
+    await renderMenu(true);
+    expect(committedOpen.at(-1)).toBe(false);
+    expect(closePopup).toHaveBeenCalledTimes(1);
+
+    const afterClose = committedOpen.length;
+    await renderMenu(false);
+    expect(committedOpen).toHaveLength(afterClose);
+    expect(committedOpen.at(-1)).toBe(false);
+
+    await act(() => setOpen(true));
+    expect(committedOpen.at(-1)).toBe(true);
+    await act(() => setOpen(false));
+    expect(committedOpen.at(-1)).toBe(false);
+    expect(closePopup).toHaveBeenCalledTimes(2);
+  });
+
+  it("does not commit an open popup requested while its trigger is hidden", async () => {
+    await renderMenu(true);
+    await act(() => setOpen(true));
+    await renderMenu(false);
+
+    expect(committedOpen.every((open) => !open)).toBe(true);
+    expect(closePopup).not.toHaveBeenCalled();
+  });
+});
diff --git a/apps/web/src/components/chat/useComposerMenuState.ts b/apps/web/src/components/chat/useComposerMenuState.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d5c006d6ec1c95a932dd8cdb359326feed6eb683
--- /dev/null
+++ b/apps/web/src/components/chat/useComposerMenuState.ts
@@ -0,0 +1,12 @@
+import { useState } from "react";
+
+/** Clear portaled menus when their measured, still-mounted triggers hide. */
+export function useComposerMenuState(hidden = false) {
+  const [open, setOpen] = useState(false);
+  // Base UI does not notify us when we close it by changing its open prop.
+  // Reset the stored state too, so revealing the trigger cannot reopen it.
+  if (hidden && open) {
+    setOpen(false);
+  }
+  return [open && !hidden, setOpen] as const;
+}
-- 
2.54.0