diff --git a/apps/code/src/renderer/features/message-editor/components/ModeSelector.tsx b/apps/code/src/renderer/features/message-editor/components/ModeSelector.tsx
index 7167e65aa..5d288fbbd 100644
--- a/apps/code/src/renderer/features/message-editor/components/ModeSelector.tsx
+++ b/apps/code/src/renderer/features/message-editor/components/ModeSelector.tsx
@@ -19,6 +19,7 @@ import {
   MenuLabel,
 } from "@posthog/quill";
 import { flattenSelectOptions } from "@renderer/features/sessions/stores/sessionStore";
+import { useRef, useState } from "react";
 
 interface ModeStyle {
   icon: React.ReactNode;
@@ -78,6 +79,9 @@ export function ModeSelector({
   allowBypassPermissions,
   disabled,
 }: ModeSelectorProps) {
+  const [open, setOpen] = useState(false);
+  const pendingValueRef = useRef<string | null>(null);
+
   if (!modeOption || modeOption.type !== "select") return null;
 
   const allOptions = flattenSelectOptions(modeOption.options);
@@ -95,7 +99,16 @@ export function ModeSelector({
     allOptions.find((opt) => opt.value === currentValue)?.name ?? currentValue;
 
   return (
-    <DropdownMenu>
+    <DropdownMenu
+      open={open}
+      onOpenChange={setOpen}
+      onOpenChangeComplete={(isOpen) => {
+        if (!isOpen && pendingValueRef.current !== null) {
+          onChange(pendingValueRef.current);
+          pendingValueRef.current = null;
+        }
+      }}
+    >
       <DropdownMenuTrigger
         render={
           <Button
@@ -122,7 +135,13 @@ export function ModeSelector({
         className={allowBypassPermissions ? "min-w-[220px]" : "min-w-[200px]"}
       >
         <MenuLabel>Mode</MenuLabel>
-        <DropdownMenuRadioGroup value={currentValue} onValueChange={onChange}>
+        <DropdownMenuRadioGroup
+          value={currentValue}
+          onValueChange={(value) => {
+            pendingValueRef.current = value;
+            setOpen(false);
+          }}
+        >
           {options.map((option) => {
             const style = getStyle(option.value);
             return (
diff --git a/apps/code/src/renderer/features/sessions/components/ReasoningLevelSelector.tsx b/apps/code/src/renderer/features/sessions/components/ReasoningLevelSelector.tsx
index a8bcaec2b..c60408d8e 100644
--- a/apps/code/src/renderer/features/sessions/components/ReasoningLevelSelector.tsx
+++ b/apps/code/src/renderer/features/sessions/components/ReasoningLevelSelector.tsx
@@ -9,6 +9,7 @@ import {
   DropdownMenuTrigger,
   MenuLabel,
 } from "@posthog/quill";
+import { useRef, useState } from "react";
 import { flattenSelectOptions } from "../stores/sessionStore";
 
 interface ReasoningLevelSelectorProps {
@@ -24,6 +25,9 @@ export function ReasoningLevelSelector({
   onChange,
   disabled,
 }: ReasoningLevelSelectorProps) {
+  const [open, setOpen] = useState(false);
+  const pendingValueRef = useRef<string | null>(null);
+
   if (!thoughtOption || thoughtOption.type !== "select") {
     return null;
   }
@@ -36,7 +40,16 @@ export function ReasoningLevelSelector({
   const prefix = adapter === "codex" ? "Reasoning" : "Effort";
 
   return (
-    <DropdownMenu>
+    <DropdownMenu
+      open={open}
+      onOpenChange={setOpen}
+      onOpenChangeComplete={(isOpen) => {
+        if (!isOpen && pendingValueRef.current !== null) {
+          onChange?.(pendingValueRef.current);
+          pendingValueRef.current = null;
+        }
+      }}
+    >
       <DropdownMenuTrigger
         render={
           <Button
@@ -65,7 +78,10 @@ export function ReasoningLevelSelector({
         <MenuLabel>{adapter === "codex" ? "Reasoning" : "Effort"}</MenuLabel>
         <DropdownMenuRadioGroup
           value={activeLevel}
-          onValueChange={(value) => onChange?.(value)}
+          onValueChange={(value) => {
+            pendingValueRef.current = value;
+            setOpen(false);
+          }}
         >
           {options.map((level) => (
             <DropdownMenuRadioItem key={level.value} value={level.value}>
diff --git a/apps/code/src/renderer/features/sessions/components/UnifiedModelSelector.tsx b/apps/code/src/renderer/features/sessions/components/UnifiedModelSelector.tsx
index 25b68370e..12ff6479f 100644
--- a/apps/code/src/renderer/features/sessions/components/UnifiedModelSelector.tsx
+++ b/apps/code/src/renderer/features/sessions/components/UnifiedModelSelector.tsx
@@ -21,7 +21,7 @@ import {
   DropdownMenuTrigger,
   MenuLabel,
 } from "@posthog/quill";
-import { Fragment, useMemo } from "react";
+import { Fragment, useMemo, useRef, useState } from "react";
 import { flattenSelectOptions } from "../stores/sessionStore";
 
 const ADAPTER_ICONS: Record<AgentAdapter, React.ReactNode> = {
@@ -55,6 +55,8 @@ export function UnifiedModelSelector({
   disabled,
   isConnecting,
 }: UnifiedModelSelectorProps) {
+  const [open, setOpen] = useState(false);
+  const pendingValueRef = useRef<string | null>(null);
   const selectOption = modelOption?.type === "select" ? modelOption : undefined;
   const options = selectOption
     ? flattenSelectOptions(selectOption.options)
@@ -83,7 +85,16 @@ export function UnifiedModelSelector({
   }
 
   return (
-    <DropdownMenu>
+    <DropdownMenu
+      open={open}
+      onOpenChange={setOpen}
+      onOpenChangeComplete={(isOpen) => {
+        if (!isOpen && pendingValueRef.current !== null) {
+          onModelChange?.(pendingValueRef.current);
+          pendingValueRef.current = null;
+        }
+      }}
+    >
       <DropdownMenuTrigger
         render={
           <Button
@@ -114,7 +125,10 @@ export function UnifiedModelSelector({
         <MenuLabel>{ADAPTER_LABELS[adapter]}</MenuLabel>
         <DropdownMenuRadioGroup
           value={currentValue ?? ""}
-          onValueChange={(value) => onModelChange?.(value)}
+          onValueChange={(value) => {
+            pendingValueRef.current = value;
+            setOpen(false);
+          }}
         >
           {groupedOptions.length > 0
             ? groupedOptions.map((group, index) => (