From 680252598c54c5601585d2b909430686a722835e Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Mon, 25 May 2026 12:51:41 +0800
Subject: [PATCH] feat: enhance OptionCombobox with open state management and
 close on selection

---
 .../ai-configs/_components/option-combobox.tsx         |  9 +++++++--
 web/components/option-combobox.tsx                     | 10 +++++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/web/app/dashboard/ai-configs/_components/option-combobox.tsx b/web/app/dashboard/ai-configs/_components/option-combobox.tsx
index fabe463..71f9e18 100644
--- a/web/app/dashboard/ai-configs/_components/option-combobox.tsx
+++ b/web/app/dashboard/ai-configs/_components/option-combobox.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"
+import { useState } from "react"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -44,11 +45,12 @@ export function OptionCombobox({
   onChange,
 }: OptionComboboxProps) {
   const t = useI18n()
+  const [open, setOpen] = useState(false)
   const selectedLabel =
     options.find((option) => option.value === value)?.label ?? placeholder
 
   return (
-    <Popover>
+    <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger
         render={
           <Button
@@ -72,7 +74,10 @@ export function OptionCombobox({
                 <CommandItem
                   key={option.value}
                   value={`${option.label} ${option.value}`}
-                  onSelect={() => onChange(option.value)}
+                  onSelect={() => {
+                    onChange(option.value)
+                    setOpen(false)
+                  }}
                 >
                   <CheckIcon
                     className={cn(
diff --git a/web/components/option-combobox.tsx b/web/components/option-combobox.tsx
index e7fa280..c5c24f9 100644
--- a/web/components/option-combobox.tsx
+++ b/web/components/option-combobox.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import type { ReactNode } from "react"
+import { useState, type ReactNode } from "react"
 import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
@@ -47,11 +47,12 @@ export function OptionCombobox({
   renderOptionAction,
 }: OptionComboboxProps) {
   const t = useI18n()
+  const [open, setOpen] = useState(false)
   const selectedLabel =
     options.find((option) => option.value === value)?.label ?? placeholder
 
   return (
-    <Popover>
+    <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger
         render={
           <Button
@@ -75,7 +76,10 @@ export function OptionCombobox({
                 <CommandItem
                   key={option.value}
                   value={`${option.label} ${option.value}`}
-                  onSelect={() => onChange(option.value)}
+                  onSelect={() => {
+                    onChange(option.value)
+                    setOpen(false)
+                  }}
                 >
                   <div className="flex min-w-0 flex-1 items-center justify-between gap-2">
                     <div className="flex min-w-0 items-center">