feat: refine channel management UI

web/default/src/components/ui/combobox-input.tsx

@@ -37,6 +37,7 @@ interface ComboboxInputProps {
   className?: string
   id?: string
   allowCustomValue?: boolean
+  openOnFocus?: boolean
 }
 
 export function ComboboxInput({
@@ -48,6 +49,7 @@ export function ComboboxInput({
   className,
   id,
   allowCustomValue = false,
+  openOnFocus = true,
 }: ComboboxInputProps) {
   const { t } = useTranslation()
   const [open, setOpen] = React.useState(false)
@@ -56,6 +58,7 @@ export function ComboboxInput({
   const containerRef = React.useRef<HTMLDivElement>(null)
   const inputRef = React.useRef<HTMLInputElement>(null)
   const listRef = React.useRef<HTMLUListElement>(null)
+  const pointerFocusRef = React.useRef(false)
   const selectedOption = React.useMemo(
     () => options.find((option) => option.value === value),
     [options, value]
@@ -175,9 +178,18 @@ export function ComboboxInput({
           }
           if (!open) setOpen(true)
         }}
+        onPointerDown={() => {
+          pointerFocusRef.current = true
+          if (document.activeElement === inputRef.current && !open) {
+            setOpen(true)
+          }
+        }}
         onFocus={() => {
           setSearchValue(allowCustomValue && !selectedOption ? value : '')
-          setOpen(true)
+          if (openOnFocus || pointerFocusRef.current) {
+            setOpen(true)
+          }
+          pointerFocusRef.current = false
         }}
         onKeyDown={handleKeyDown}
         className={cn('pr-9', className)}

web/default/src/components/ui/combobox.tsx

@@ -47,6 +47,7 @@ type LegacyComboboxProps = {
   allowCustomValue?: boolean
   className?: string
   id?: string
+  openOnFocus?: boolean
 }
 
 function Combobox(props: LegacyComboboxProps): React.ReactElement
@@ -69,6 +70,7 @@ function Combobox(
         emptyText={props.emptyText}
         className={props.className}
         allowCustomValue={props.allowCustomValue}
+        openOnFocus={props.openOnFocus}
       />
     )
   }