@baishuyun/ai-design 2.1.0-alpha.2 → 2.1.0

package/src/components/agent-helper/field-value-input/dept-select.tsx

@@ -0,0 +1,447 @@
+import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import type { IDeptOption } from '@baishuyun/types';
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
+import { FieldWrapper, type FieldValueInputProps } from './index';
+import { usePortalContainer } from './picker-inputs';
+import { DropdownChevron, ClearIcon, CloseIcon, CheckIcon } from './icons';
+import { SearchIcon } from '../../bs-icons';
+import { ClearAllIcon } from '../../icons/clear-all-icon';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+
+// ── Types ───────────────────────────────────────────────────────────
+
+export type DeptSelectKind = 'dept' | 'deptgroup';
+
+export interface DeptSelectProps extends FieldValueInputProps {
+  kind: DeptSelectKind;
+  multiple?: boolean;
+}
+
+interface DeptFlatNode {
+  id: string;
+  name: string;
+  parentId?: string;
+}
+
+interface DeptTreeNode extends DeptFlatNode {
+  children?: DeptTreeNode[];
+}
+
+// ── Tree utilities ──────────────────────────────────────────────────
+
+/** 将服务返回的选项统一拍平：嵌套 children 与扁平 parentId 两种结构都支持 */
+function flattenOptions(options: IDeptOption[], inheritedParentId?: string): DeptFlatNode[] {
+  const out: DeptFlatNode[] = [];
+  options.forEach((opt) => {
+    out.push({ id: opt.id, name: opt.name, parentId: opt.parentId ?? inheritedParentId });
+    if (opt.children?.length) {
+      out.push(...flattenOptions(opt.children, opt.id));
+    }
+  });
+  return out;
+}
+
+/** 由扁平列表构建部门树；parentId 缺失或找不到父节点时作为根节点 */
+function buildTree(flat: DeptFlatNode[]): DeptTreeNode[] {
+  const nodeMap = new Map<string, DeptTreeNode>();
+  flat.forEach((f) => nodeMap.set(f.id, { ...f }));
+  const roots: DeptTreeNode[] = [];
+  flat.forEach((f) => {
+    const node = nodeMap.get(f.id)!;
+    const parent = f.parentId ? nodeMap.get(f.parentId) : undefined;
+    if (parent && parent.id !== node.id) {
+      parent.children = parent.children ?? [];
+      parent.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  });
+  return roots;
+}
+
+// ── Icons ───────────────────────────────────────────────────────────
+
+const TreeChevron = ({ expanded }: { expanded: boolean }) => (
+  <svg
+    width="14" height="14" viewBox="0 0 14 14" fill="none"
+    className="shrink-0 transition-transform duration-200"
+    style={{ transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)' }}
+  >
+    <path d="M5 3L9.5 7L5 11" stroke="#999999" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+// ── DeptSelect ──────────────────────────────────────────────────────
+//
+// 等价于旧版 BsyDeptCheckBox：
+// - 打开时一次性加载完整部门列表并缓存，构建组织架构树（可展开/收起）
+// - 搜索时对整棵树按名称过滤，展示扁平结果；清空搜索恢复树形展示
+// - 多选支持「全选」（搜索时为「全选搜索结果」），触发器内以标签展示已选项
+// - 数据无 parentId 时（如部门组）退化为扁平列表
+
+export function DeptSelect({
+  field,
+  value,
+  onChange,
+  disabled,
+  service,
+  kind,
+  multiple = false,
+  showLabel,
+  showDescription,
+}: DeptSelectProps) {
+  const [open, setOpen] = useState(false);
+  const [keyword, setKeyword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [tree, setTree] = useState<DeptTreeNode[]>([]);
+  const [flatList, setFlatList] = useState<DeptFlatNode[]>([]);
+  const [nameMap, setNameMap] = useState<Record<string, string>>({});
+  const [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set());
+  const [isHovering, setIsHovering] = useState(false);
+  const loadedRef = useRef(false);
+  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-field-value-picker-portal');
+
+  const fieldName = field.widget?.widgetName || '';
+  const searchFn = kind === 'dept' ? service?.searchDepts : service?.searchDeptGroups;
+
+  const selectedIds: string[] = multiple ? (Array.isArray(value) ? value.map(String) : []) : [];
+  const selectedIdSet = new Set(selectedIds);
+  const singleId = !multiple && typeof value === 'string' ? value : '';
+
+  const loadOptions = useCallback(async () => {
+    if (!searchFn || loadedRef.current) return;
+    loadedRef.current = true;
+    setLoading(true);
+    try {
+      const list = await searchFn('', { field: fieldName });
+      const flat = flattenOptions(list);
+      const nextTree = buildTree(flat);
+      setFlatList(flat);
+      setTree(nextTree);
+      setNameMap((prev) => {
+        const next = { ...prev };
+        flat.forEach((f) => {
+          next[f.id] = f.name;
+        });
+        return next;
+      });
+      // 与旧组件一致：默认展开第一个根节点
+      const firstWithChildren = nextTree.find((n) => n.children?.length);
+      if (firstWithChildren) {
+        setExpandedKeys(new Set([firstWithChildren.id]));
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFn, fieldName]);
+
+  // 首次打开时加载；已有值时提前加载以解析名称
+  useEffect(() => {
+    if (open) loadOptions();
+  }, [open, loadOptions]);
+
+  useEffect(() => {
+    const hasValue = multiple ? selectedIds.length > 0 : !!singleId;
+    if (hasValue) loadOptions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const searching = !!keyword.trim();
+  const searchResults = useMemo(() => {
+    if (!searching) return [];
+    const kw = keyword.trim();
+    return flatList.filter((n) => n.name.includes(kw));
+  }, [searching, keyword, flatList]);
+
+  // 全选作用于当前可见范围：搜索时为搜索结果，否则为全部部门
+  const visibleIds = searching ? searchResults.map((n) => n.id) : flatList.map((n) => n.id);
+  const isAllSelected =
+    multiple && visibleIds.length > 0 && visibleIds.every((id) => selectedIdSet.has(id));
+
+  const handleToggle = useCallback(
+    (node: DeptFlatNode) => {
+      if (multiple) {
+        const next = selectedIdSet.has(node.id)
+          ? selectedIds.filter((id) => id !== node.id)
+          : [...selectedIds, node.id];
+        onChange?.(next);
+      } else {
+        onChange?.(node.id);
+        setNameMap((prev) => ({ ...prev, [node.id]: node.name }));
+        setOpen(false);
+        setKeyword('');
+      }
+    },
+    [multiple, selectedIds, selectedIdSet, onChange],
+  );
+
+  const handleSelectAll = useCallback(() => {
+    if (!multiple) return;
+    if (isAllSelected) {
+      const visibleSet = new Set(visibleIds);
+      onChange?.(selectedIds.filter((id) => !visibleSet.has(id)));
+    } else {
+      onChange?.([...new Set([...selectedIds, ...visibleIds])]);
+    }
+  }, [multiple, isAllSelected, visibleIds, selectedIds, onChange]);
+
+  const toggleExpand = useCallback((id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleClearSingle = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.('');
+    },
+    [onChange],
+  );
+
+  const handleRemoveMultiple = useCallback(
+    (id: string, e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.(selectedIds.filter((v) => v !== id));
+    },
+    [selectedIds, onChange],
+  );
+
+  const handleClearAllMultiple = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.([]);
+    },
+    [onChange],
+  );
+
+  const renderTreeNodes = (nodes: DeptTreeNode[], level: number): React.ReactNode =>
+    nodes.map((node) => {
+      const hasChildren = !!node.children?.length;
+      const expanded = expandedKeys.has(node.id);
+      const checked = multiple ? selectedIdSet.has(node.id) : singleId === node.id;
+      return (
+        <div key={node.id}>
+          <button
+            type="button"
+            onClick={() => handleToggle(node)}
+            className={cn(
+              'flex items-center gap-[6px] w-full h-[34px] pr-[10px] rounded-[4px] text-left',
+              checked ? 'bg-[#F0F6FF] text-[#0265FF]' : 'text-[#030303] hover:bg-[#EFF0F6]',
+              transCls,
+            )}
+            style={{ paddingLeft: 10 + level * 20 }}
+          >
+            {hasChildren ? (
+              <span
+                role="button"
+                tabIndex={-1}
+                onClick={(e) => toggleExpand(node.id, e)}
+                className="flex items-center justify-center w-[16px] h-[16px] shrink-0"
+              >
+                <TreeChevron expanded={expanded} />
+              </span>
+            ) : (
+              <span className="w-[16px] shrink-0" />
+            )}
+            {multiple && (
+              <div
+                className={cn(
+                  'w-[14px] h-[14px] rounded-[2px] flex items-center justify-center shrink-0 border',
+                  checked ? 'bg-[#0265FF] border-[#0265FF]' : 'bg-white border-[#CCCCCC]',
+                )}
+              >
+                {checked && <CheckIcon />}
+              </div>
+            )}
+            <span className="truncate text-[14px]">{node.name}</span>
+          </button>
+          {hasChildren && expanded && renderTreeNodes(node.children!, level + 1)}
+        </div>
+      );
+    });
+
+  const renderSearchResults = () =>
+    searchResults.map((node) => {
+      const checked = multiple ? selectedIdSet.has(node.id) : singleId === node.id;
+      return (
+        <button
+          key={node.id}
+          type="button"
+          onClick={() => handleToggle(node)}
+          className={cn(
+            'flex items-center gap-[10px] h-[34px] px-[10px] rounded-[4px] text-left',
+            checked ? 'bg-[#F0F6FF] text-[#0265FF]' : 'text-[#030303] hover:bg-[#EFF0F6]',
+            transCls,
+          )}
+        >
+          {multiple && (
+            <div
+              className={cn(
+                'w-[14px] h-[14px] rounded-[2px] flex items-center justify-center shrink-0 border',
+                checked ? 'bg-[#0265FF] border-[#0265FF]' : 'bg-white border-[#CCCCCC]',
+              )}
+            >
+              {checked && <CheckIcon />}
+            </div>
+          )}
+          <span className="truncate text-[14px]">{node.name}</span>
+        </button>
+      );
+    });
+
+  const hasSelectionMulti = multiple && selectedIds.length > 0;
+  const showClearMulti = hasSelectionMulti && isHovering;
+  const singleLabel = singleId ? nameMap[singleId] || singleId : '';
+
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={setTriggerRef}
+            type="button"
+            disabled={disabled}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+            className={cn(
+              'flex items-center justify-between w-full h-[34px] gap-2.5',
+              'bg-white border rounded-[4px]',
+              'py-[7px]',
+              (multiple ? hasSelectionMulti : !!singleLabel) ? 'pl-[4px] pr-[10px]' : 'px-[10px]',
+              'text-left cursor-pointer',
+              'hover:border-[#0265FF]',
+              disabled && 'opacity-50 cursor-not-allowed hover:border-[#E0E0E0]',
+              open ? 'border-[#0265FF]' : 'border-[#E0E0E0]',
+              transCls,
+            )}
+          >
+            {multiple ? (
+              hasSelectionMulti ? (
+                <>
+                  <div className="flex items-center gap-[4px] min-w-0 flex-1 overflow-x-auto scrollbar-hide">
+                    {selectedIds.map((id) => (
+                      <span
+                        key={id}
+                        className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0"
+                      >
+                        <span className="text-[14px] text-[#030303] leading-[normal]">
+                          {nameMap[id] || id}
+                        </span>
+                        <span
+                          className="cursor-pointer flex items-center shrink-0"
+                          onClick={(e) => handleRemoveMultiple(id, e)}
+                        >
+                          <CloseIcon />
+                        </span>
+                      </span>
+                    ))}
+                  </div>
+                  {showClearMulti ? (
+                    <span
+                      className="cursor-pointer flex items-center shrink-0"
+                      onClick={handleClearAllMultiple}
+                    >
+                      <ClearAllIcon />
+                    </span>
+                  ) : (
+                    <DropdownChevron open={open} />
+                  )}
+                </>
+              ) : (
+                <>
+                  <span className="text-[14px] text-[#999999] leading-[normal] truncate">
+                    {field.description ?? `请选择${field.label}`}
+                  </span>
+                  <DropdownChevron open={open} />
+                </>
+              )
+            ) : (
+              <>
+                <span className={cn('truncate', !singleLabel && 'text-[#999999]')}>
+                  {singleLabel || (field.description ?? `请选择${field.label}`)}
+                </span>
+                <div className="flex items-center gap-[4px] shrink-0">
+                  {!!singleLabel && (
+                    <span
+                      role="button"
+                      tabIndex={-1}
+                      onClick={handleClearSingle}
+                      className="flex items-center justify-center w-[18px] h-[18px] hover:bg-[#EFF0F6] rounded-full"
+                    >
+                      <ClearIcon />
+                    </span>
+                  )}
+                  <DropdownChevron open={open} />
+                </div>
+              </>
+            )}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          sideOffset={4}
+          portalContainer={portalContainer}
+          className="!border-0 rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[8px]"
+          style={{ width: 'var(--radix-popover-trigger-width)' }}
+        >
+          <div className="flex items-center gap-[8px] px-[6px] mb-[4px] h-[34px] bg-[#F6F7FA] rounded-[4px]">
+            <SearchIcon />
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              placeholder={`搜索${field.label}`}
+              className="flex-1 bg-transparent text-[14px] text-[#030303] placeholder:text-[#999999] outline-none border-none"
+              autoFocus
+            />
+          </div>
+          {multiple && !loading && visibleIds.length > 0 && (
+            <button
+              type="button"
+              onClick={handleSelectAll}
+              className={cn(
+                'flex items-center gap-[10px] w-full h-[34px] px-[10px] rounded-[4px] text-left',
+                'text-[#0265FF] hover:bg-[#EFF0F6]',
+                transCls,
+              )}
+            >
+              <div
+                className={cn(
+                  'w-[14px] h-[14px] rounded-[2px] flex items-center justify-center shrink-0 border',
+                  isAllSelected ? 'bg-[#0265FF] border-[#0265FF]' : 'bg-white border-[#CCCCCC]',
+                )}
+              >
+                {isAllSelected && <CheckIcon />}
+              </div>
+              <span className="text-[14px]">{searching ? '全选搜索结果' : '全选'}</span>
+            </button>
+          )}
+          <div className="flex flex-col gap-0 max-h-[240px] overflow-y-auto">
+            {loading ? (
+              <div className="px-[10px] py-[8px] text-[14px] text-[#999999]">加载中...</div>
+            ) : searching ? (
+              searchResults.length === 0 ? (
+                <div className="px-[10px] py-[8px] text-[14px] text-[#999999]">暂无数据</div>
+              ) : (
+                renderSearchResults()
+              )
+            ) : tree.length === 0 ? (
+              <div className="px-[10px] py-[8px] text-[14px] text-[#999999]">暂无数据</div>
+            ) : (
+              renderTreeNodes(tree, 0)
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </FieldWrapper>
+  );
+}

package/src/components/agent-helper/field-value-input/index.tsx

@@ -5,6 +5,7 @@ import { cn } from '../../../lib/utils';
 
 import { TextInput, NumberInput, TextareaInput, PasswordInput, DateTimeInput, UploadInput, RangeNumberInput, RangeDateTimeInput } from './inputs';
 import { ComboInput, CheckboxGroupInput, RadioGroupInput, AsyncPicker, CascadingAddressInput, TextMultiSelect } from './picker-inputs';
+import { DeptSelect } from './dept-select';
 import { SeparatorDisplay, ButtonDisplay, SubformPlaceholder } from './display';
 
 // ── Props ───────────────────────────────────────────────────────────
@@ -104,11 +105,11 @@ export const FieldValueInput = (props: FieldValueInputProps) => {
     case 'user':
       return <AsyncPicker {...props} kind="user" multiple={operator === 'in' || operator === 'nin'} />;
     case 'dept':
-      return <AsyncPicker {...props} kind="dept" multiple={operator === 'in' || operator === 'nin'} />;
+      return <DeptSelect {...props} kind="dept" multiple={operator === 'in' || operator === 'nin'} />;
     case 'usergroup':
       return <AsyncPicker {...props} kind="usergroup" multiple={operator === 'in' || operator === 'nin' || operator === 'all'} />;
     case 'deptgroup':
-      return <AsyncPicker {...props} kind="deptgroup" multiple={operator === 'in' || operator === 'nin' || operator === 'all'} />;
+      return <DeptSelect {...props} kind="deptgroup" multiple={operator === 'in' || operator === 'nin' || operator === 'all'} />;
 
     // ── Combo / linkdata / linkquery ──
     case 'combo':

package/src/components/agent-helper/field-value-input/picker-inputs.tsx

@@ -19,24 +19,21 @@ import { chinaAddressData } from './china-address-data';
 const inputBaseCls =
   'h-[34px] px-[10px] py-[7px] rounded-[4px] bg-white border text-[14px] text-[#030303] placeholder:text-[#999999] focus:outline-none focus:border-[#0265FF] w-full disabled:bg-[#EFF0F6] disabled:cursor-not-allowed';
 
-type PickerItem = {
+interface WidgetItem {
   label: string;
   value: string | number;
-};
-
-function getItems(field: FieldValueInputProps['field']): PickerItem[] {
-  return (field.widget?.items ?? [])
-    .map((it) => {
-      if ('text' in it) {
-        return { label: it.text, value: it.value };
-      }
+}
 
-      return null;
-    })
-    .filter((item): item is PickerItem => item !== null);
+function getItems(field: FieldValueInputProps['field']): WidgetItem[] {
+  return field.widget?.items
+    ?.filter((it) => typeof it.label === 'string' || typeof it.text === 'string')
+    .map((it) => ({
+      label: it.label ?? it.text ?? '',
+      value: it.value,
+    })) as WidgetItem[] ?? [];
 }
 
-function usePortalContainer(attr: string) {
+export function usePortalContainer(attr: string) {
   const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
   const setTriggerRef = useCallback(
     (node: HTMLButtonElement | null) => {
@@ -134,7 +131,8 @@ export function ComboInput({ field, value, onChange, disabled, service, showLabe
                   type="button"
                   onClick={() => handleSelect(item.value)}
                   className={cn(
-                    'h-[34px] px-[10px] rounded-[4px] text-left text-[14px] leading-[normal]',
+                    // shrink-0 防止 flex 容器 max-height 下子项收缩坍缩，改走 overflow 滚动
+                    'shrink-0 h-[34px] px-[10px] rounded-[4px] text-left text-[14px] leading-[normal]',
                     value === item.value
                       ? 'bg-[#F0F6FF] text-[#0265FF]'
                       : 'text-[#030303] hover:bg-[#EFF0F6]',
@@ -507,7 +505,8 @@ export function AsyncPicker({ field, value, onChange, disabled, service, kind, m
                   type="button"
                   onClick={() => handleSelect(opt)}
                   className={cn(
-                    'flex items-center gap-[10px] h-[34px] px-[10px] rounded-[4px] text-left',
+                    // shrink-0 防止 flex 容器 max-height 下子项收缩坍缩，改走 overflow 滚动
+                    'shrink-0 flex items-center gap-[10px] h-[34px] px-[10px] rounded-[4px] text-left',
                     isSelected
                       ? 'bg-[#F0F6FF] text-[#0265FF]'
                       : 'text-[#030303] hover:bg-[#EFF0F6]',
@@ -687,7 +686,8 @@ export function TextMultiSelect({ field, value, onChange, disabled, service, sho
                     type="button"
                     onClick={() => handleToggle(opt)}
                     className={cn(
-                      'flex items-center gap-[10px] h-[34px] px-[10px] rounded-[4px] text-left',
+                      // shrink-0 防止 flex 容器 max-height 下子项收缩坍缩，改走 overflow 滚动
+                      'shrink-0 flex items-center gap-[10px] h-[34px] px-[10px] rounded-[4px] text-left',
                       checked
                         ? 'bg-[#F0F6FF] text-[#0265FF]'
                         : 'text-[#030303] hover:bg-[#EFF0F6]',
@@ -1030,7 +1030,8 @@ export function AddressInput({ field, value, onChange, disabled, service, showLa
                     setKeyword('');
                   }}
                   className={cn(
-                    'h-[34px] px-[10px] rounded-[4px] text-left text-[14px] leading-[normal]',
+                    // shrink-0 防止 flex 容器 max-height 下子项收缩坍缩，改走 overflow 滚动
+                    'shrink-0 h-[34px] px-[10px] rounded-[4px] text-left text-[14px] leading-[normal]',
                     'text-[#030303] hover:bg-[#EFF0F6]',
                     transCls,
                   )}
@@ -1127,7 +1128,8 @@ export function LocationInput({ field, value, onChange, disabled, service, showL
                     setKeyword('');
                   }}
                   className={cn(
-                    'h-[34px] px-[10px] rounded-[4px] text-left text-[14px] leading-[normal]',
+                    // shrink-0 防止 flex 容器 max-height 下子项收缩坍缩，改走 overflow 滚动
+                    'shrink-0 h-[34px] px-[10px] rounded-[4px] text-left text-[14px] leading-[normal]',
                     'text-[#030303] hover:bg-[#EFF0F6]',
                     transCls,
                   )}

package/src/components/agent-helper/form-select/index.tsx

@@ -12,6 +12,9 @@ import { cn } from '../../../lib/utils';
 import { transCls } from '../../../const/ui';
 import { SolidArrowDownIcon, SearchIcon } from '../../bs-icons';
 import { useSelectPopoverPosition } from '../../../hooks/use-select-popover-position';
+import { FontIcon } from '../../font-icon';
+
+const POPOVER_MAX_HEIGHT = 300;
 
 const FolderIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
@@ -170,14 +173,6 @@ function buildFormTree(items: FormSelectItem[], searchQuery: string): FormTreeIt
   return result;
 }
 
-// ── Form Icon ─────────────────────────────────────────────────────
-
-function getFormIconClass(icon: number): string {
-  const isNew = icon >= 25;
-  const newStr = isNew ? '-new' : '';
-  return `node-icon icon-bsy-form${newStr} icon${newStr}-bsy-form-${icon}`;
-}
-
 // ── Entry Item ────────────────────────────────────────────────────
 
 function FormEntryItem({
@@ -202,10 +197,7 @@ function FormEntryItem({
       onClick={onClick}
     >
       <span className="flex items-center gap-[6px] min-w-0 flex-1">
-        <i
-          className={getFormIconClass(item.icon)}
-          style={{ fontSize: 16, lineHeight: 1 }}
-        />
+        <FontIcon name={item.icon} />
         <span className="text-[14px] leading-[normal] truncate">
           {item.name}
         </span>
@@ -307,11 +299,12 @@ function FormPopover({
     <div
       className={cn(
         'bg-white rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[4px]',
-        'flex flex-col gap-[4px]',
+        'flex min-h-0 flex-col gap-[4px] overflow-hidden',
       )}
+      style={{ maxHeight: POPOVER_MAX_HEIGHT }}
     >
       {/* Search input */}
-      <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
+      <div className="flex shrink-0 items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
         <SearchIcon />
         <input
           type="text"
@@ -337,7 +330,7 @@ function FormPopover({
       )}
 
       {/* Form list */}
-      <div className="flex flex-col gap-0 max-h-[400px] overflow-y-auto">
+      <div className="flex min-h-0 flex-col gap-0 overflow-y-auto">
         {tree.length > 0 ? (
           tree.map((node) => (
             <FormTreeItemNode
@@ -391,7 +384,7 @@ export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
     const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
 
     const { popoverStyle, updatePopoverPosition } =
-      useSelectPopoverPosition(triggerRef);
+      useSelectPopoverPosition(triggerRef, { estimatedHeight: POPOVER_MAX_HEIGHT });
 
     const resolvedValue = controlledValue ?? internalValue;
 
@@ -655,10 +648,7 @@ export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
                   className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0 max-w-[160px]"
                   onClick={(e) => handleRemoveChip(form.id, e)}
                 >
-                  <i
-                    className={getFormIconClass(form.icon ?? 0)}
-                    style={{ fontSize: 14, lineHeight: 1 }}
-                  />
+                  <FontIcon name={form.icon ?? 0} style={{ fontSize: 14 }} />
                   <span className="text-[14px] text-[#030303] truncate leading-[normal]">
                     {form.name}
                   </span>
@@ -680,10 +670,7 @@ export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
             <span className="flex items-center gap-[6px] min-w-0 flex-1">
               {selectedForm ? (
                 <>
-                  <i
-                    className={getFormIconClass(selectedForm.icon ?? 0)}
-                    style={{ fontSize: 16, lineHeight: 1 }}
-                  />
+                  <FontIcon name={selectedForm.icon ?? 0} />
                   <span className="text-[14px] text-[#030303] leading-[normal] truncate">
                     {selectedForm.name}
                   </span>
@@ -709,7 +696,7 @@ export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
         {/* Popover */}
         {isOpen &&
           createPortal(
-            <div ref={popoverRef} style={popoverStyle}>
+            <div ref={popoverRef} className="flex flex-col" style={popoverStyle}>
               <FormPopover
                 searchQuery={searchQuery}
                 onSearchChange={setSearchQuery}