@svadmin/ui 0.88.1 → 0.91.0

package/dist/components/TreeSelect.svelte

@@ -22,6 +22,10 @@
   const i18n = useTranslation();
 
   interface Props {
+    id?: string;
+    ariaLabel?: string;
+    describedby?: string;
+    invalid?: boolean;
     options?: TreeSelectOption[];
     value?: string | number | (string | number)[];
     multiple?: boolean;
@@ -39,6 +43,10 @@
   }
 
   let {
+    id,
+    ariaLabel,
+    describedby,
+    invalid = false,
     options = $bindable([]),
     value = $bindable(undefined),
     multiple = false,
@@ -55,6 +63,10 @@
     onchange,
   }: Props = $props();
 
+  const instanceId = $props.id();
+  const triggerId = $derived(id ?? `${instanceId}-trigger`);
+  const panelId = $derived(`${triggerId}-panel`);
+  const treeId = `${instanceId}-tree`;
   let open = $state(false);
   let searchQuery = $state('');
   let loadingValues = new SvelteSet<string | number>();
@@ -62,11 +74,21 @@
     node: TreeSelectOption;
     loader: NonNullable<Props['loadChildren']>;
     treeEpoch: number;
+    selection: SelectionAttempt | undefined;
+    promise: Promise<boolean>;
+    retrying: boolean;
   }
   let loadErrors = new SvelteMap<string | number, ChildLoad>();
-  let expandedNodes = new SvelteSet<string | number>();
+  let expandedOverrides = new SvelteMap<string | number, boolean>();
   let mounted = true;
   let treeRoot: HTMLElement | undefined = $state();
+  let panelElement: HTMLDivElement | undefined = $state();
+  let triggerElement: HTMLButtonElement | undefined = $state();
+  let controlElement: HTMLDivElement | undefined = $state();
+  let searchElement: HTMLInputElement | null = $state(null);
+  let closedByOutsideInteraction = false;
+  let outsideFocusTarget: HTMLElement | undefined;
+  let activeTreeValue = $state<string | number>();
   let treeScrollTop = $state(0);
   let treeRevision = $state(0);
   const loads = new Map<string | number, ChildLoad>();
@@ -80,6 +102,7 @@
   }
   let selectionAttempt = $state.raw<SelectionAttempt>();
   const selectionErrors = new SvelteSet<string | number>();
+  const capabilityErrors = new SvelteSet<string | number>();
   let treeEpoch = 0;
   onDestroy(() => { mounted = false; loads.clear(); });
 
@@ -122,12 +145,15 @@
 
   $effect.pre(() => {
     // 外部替换根数组开启新数据版本；内部补充子节点保留当前版本。
+    void disabledValues;
     if (options !== observedOptions) {
       observedOptions = options;
       treeEpoch += 1;
       treeRevision += 1;
+      expandedOverrides.clear();
       selectionAttempt = undefined;
       selectionErrors.clear();
+      capabilityErrors.clear();
     }
     const loader = loadChildren;
     const unavailable = disabled;
@@ -135,36 +161,61 @@
       observedLoader = loader;
       selectionAttempt = undefined;
       selectionErrors.clear();
+      capabilityErrors.clear();
     }
-    if (!multiple || onlyLeafSelectable || selectionAttempt?.value !== value) selectionAttempt = undefined;
+    if (!multiple || onlyLeafSelectable || selectionAttempt?.value !== value
+      || selectionAttempt && disabledValues.has(selectionAttempt.key)) selectionAttempt = undefined;
     for (const [key, request] of loads) {
-      if (unavailable || request.treeEpoch !== treeEpoch || loader !== request.loader) {
+      if (unavailable || disabledValues.has(key)
+        || request.treeEpoch !== treeEpoch || loader !== request.loader) {
+        if (request.selection === selectionAttempt) selectionAttempt = undefined;
         loads.delete(key);
         loadingValues.delete(key);
         loadErrors.delete(key);
       }
     }
     for (const [key, request] of loadErrors) {
-      if (unavailable || request.treeEpoch !== treeEpoch || loader !== request.loader) loadErrors.delete(key);
+      if (unavailable || disabledValues.has(key)
+        || request.treeEpoch !== treeEpoch || loader !== request.loader) loadErrors.delete(key);
+    }
+    for (const key of [...capabilityErrors]) {
+      const current = optionMap.get(key);
+      if (unavailable || disabledValues.has(key) || !current
+        || !subtreeLacksLoadCapability(current)) {
+        capabilityErrors.delete(key);
+      }
     }
   });
 
   function toggleExpand(nodeValue: string | number, event?: MouseEvent) {
     event?.stopPropagation();
-    if (expandedNodes.has(nodeValue)) {
-      expandedNodes.delete(nodeValue);
-    } else {
-      expandedNodes.add(nodeValue);
-    }
+    const node = optionMap.get(nodeValue);
+    if (!mounted || !node || disabled || disabledValues.has(nodeValue) || searchQuery.trim()) return;
+    expandedOverrides.set(nodeValue, !isNodeExpanded(node));
   }
 
   function hasChildren(node: TreeSelectOption): boolean {
     return Boolean(node.hasChildren ?? (node.children && node.children.length > 0));
   }
 
+  function lacksLoadCapability(node: TreeSelectOption): boolean {
+    const current = optionMap.get(node.value) ?? node;
+    return hasChildren(current) && !current.children && !loadChildren;
+  }
+
+  // 祖先反馈只有在整个可交互子树仍存在缺失加载能力的分支时保留。
+  function subtreeLacksLoadCapability(node: TreeSelectOption, depth = 0): boolean {
+    const current = optionMap.get(node.value) ?? node;
+    if (current.disabled || depth > 64) return false;
+    if (hasChildren(current) && !current.children) return !loadChildren;
+    return (current.children ?? []).some(child => subtreeLacksLoadCapability(child, depth + 1));
+  }
+
   function isNodeExpanded(node: TreeSelectOption): boolean {
     if (searchQuery.trim()) return true; // Auto expand all on search
-    return expandedNodes.has(node.value) || !!node.expanded;
+    return expandedOverrides.has(node.value)
+      ? expandedOverrides.get(node.value) === true
+      : !!node.expanded;
   }
 
   function selectableLeaves(node: TreeSelectOption): TreeSelectOption[] {
@@ -215,46 +266,80 @@
     return changed ? next : nodes;
   }
 
-  async function ensureChildren(node: TreeSelectOption): Promise<boolean> {
-    if (!mounted || disabled || disabledValues.has(node.value) || loadingValues.has(node.value)) return false;
+  async function ensureChildren(node: TreeSelectOption, selection?: SelectionAttempt): Promise<boolean> {
+    if (!mounted || disabled || disabledValues.has(node.value)) return false;
+    const existing = loads.get(node.value);
+    if (existing) {
+      if (selection) existing.selection = selection;
+      return existing.promise;
+    }
+    if (loadingValues.has(node.value)) return false;
     if (!node.hasChildren || node.children) return true;
     const currentNode = optionMap.get(node.value);
     if (!loadChildren || !currentNode) return false;
-    const request = { node: currentNode, loader: loadChildren, treeEpoch };
+    const request: ChildLoad = {
+      node: currentNode,
+      loader: loadChildren,
+      treeEpoch,
+      selection,
+      promise: Promise.resolve(false),
+      retrying: false,
+    };
     loads.set(node.value, request);
     const current = () => mounted && !disabled && loads.get(node.value) === request
       && options === observedOptions && treeEpoch === request.treeEpoch
       && optionMap.has(node.value) && !disabledValues.has(node.value) && loadChildren === request.loader;
     loadingValues.add(node.value);
     loadErrors.delete(node.value);
-    try {
-      const children = await request.loader(request.node);
-      if (!current()) return false;
-      options = updateOptionsChildren(options, node.value, children);
-      observedOptions = options;
-      return true;
-    } catch {
-      if (current()) loadErrors.set(node.value, request);
-      return false;
-    } finally {
-      if (mounted && loads.get(node.value) === request) {
-        loads.delete(node.value);
-        loadingValues.delete(node.value);
+    // 展开和级联选择共享包含归属校验、写入与清理的完整请求结果。
+    request.promise = (async () => {
+      try {
+        const children = await request.loader(request.node);
+        if (!current()) return false;
+        options = updateOptionsChildren(options, node.value, children);
+        observedOptions = options;
+        return true;
+      } catch {
+        if (current()) loadErrors.set(node.value, request);
+        return false;
+      } finally {
+        if (mounted && loads.get(node.value) === request) {
+          loads.delete(node.value);
+          loadingValues.delete(node.value);
+        }
       }
-    }
+    })();
+    return request.promise;
   }
 
   async function toggleExpandAsync(node: TreeSelectOption, event?: MouseEvent): Promise<void> {
     event?.stopPropagation();
+    if (!mounted || disabled || disabledValues.has(node.value)) return;
+    if (loadingValues.has(node.value)) return;
+    if (lacksLoadCapability(node)) {
+      capabilityErrors.add(node.value);
+      return;
+    }
+    capabilityErrors.delete(node.value);
     if (!await ensureChildren(node)) return;
     if (!mounted || disabled) return;
     toggleExpand(node.value);
   }
 
-  function retryChildren(node: TreeSelectOption, event: MouseEvent): void {
+  function ownerTreeItem(event: Event): HTMLElement | null {
+    return event.currentTarget instanceof HTMLElement
+      ? event.currentTarget.closest<HTMLElement>('[role="treeitem"]')
+      : null;
+  }
+
+  function retryChildren(node: TreeSelectOption, event: Event): void {
     event.stopPropagation();
+    const owner = ownerTreeItem(event);
+    owner?.focus();
     if (selectionErrors.has(node.value)) void handleSelect(node);
     else void toggleExpandAsync(node);
+    const request = loads.get(node.value);
+    if (request) request.retrying = true;
   }
 
   function setMultipleSelection(node: TreeSelectOption): void {
@@ -272,6 +357,7 @@
   function isCurrentSelection(attempt: SelectionAttempt): boolean {
     return mounted && !disabled && multiple && !onlyLeafSelectable
       && selectionAttempt === attempt && attempt.epoch === treeEpoch
+      && !disabledValues.has(attempt.key)
       && options === observedOptions && attempt.loader === loadChildren && attempt.value === value;
   }
 
@@ -280,8 +366,10 @@
     const attempt: SelectionAttempt = { key: node.value, epoch: treeEpoch, loader: loadChildren, value };
     selectionAttempt = attempt;
     selectionErrors.delete(node.value);
+    capabilityErrors.delete(node.value);
     let visited = 0;
     let requests = 0;
+    let missingCapability = false;
     // 级联加载有界且只在全部成功后写入选择；搜索裁剪不改变选择范围。
     async function loadSubtree(key: string | number, depth: number): Promise<boolean> {
       if (!isCurrentSelection(attempt)) return false;
@@ -289,7 +377,11 @@
       if (!currentNode || ++visited > 10000 || depth > 64) return false;
       if (currentNode.disabled) return true;
       if (currentNode.hasChildren && !currentNode.children) {
-        if (++requests > 100 || !await ensureChildren(currentNode)) return false;
+        if (lacksLoadCapability(currentNode)) {
+          missingCapability = true;
+          return false;
+        }
+        if (++requests > 100 || !await ensureChildren(currentNode, attempt)) return false;
       }
       if (!isCurrentSelection(attempt)) return false;
       const loaded = optionMap.get(key);
@@ -301,7 +393,10 @@
     }
     try {
       if (!await loadSubtree(node.value, 0)) {
-        if (isCurrentSelection(attempt)) selectionErrors.add(node.value);
+        if (isCurrentSelection(attempt)) {
+          if (missingCapability) capabilityErrors.add(node.value);
+          else selectionErrors.add(node.value);
+        }
         return;
       }
       if (isCurrentSelection(attempt)) {
@@ -361,6 +456,10 @@
     return `${typeof value}:${String(value)}`;
   }
 
+  function nodeId(value: string | number): string {
+    return `${instanceId}-node-${treeKey(value).split('').map(unit => unit.charCodeAt(0).toString(16)).join('-')}`;
+  }
+
   async function focusTreeNode(valueToFocus: string | number): Promise<void> {
     const index = flatVisibleNodes.findIndex(entry => entry.node.value === valueToFocus);
     if (index < 0) return;
@@ -372,7 +471,7 @@
         await tick();
       }
     }
-    if (!mounted) return;
+    if (!mounted || !open) return;
     const element = treeRoot?.querySelector<HTMLElement>(`[data-tree-key="${CSS.escape(treeKey(valueToFocus))}"]`);
     element?.focus();
   }
@@ -383,12 +482,73 @@
     if (target) void focusTreeNode(target.node.value);
   }
 
+  async function handleOpenAutoFocus(event: Event): Promise<void> {
+    event.preventDefault();
+    closedByOutsideInteraction = false;
+    outsideFocusTarget = undefined;
+    await tick();
+    const panel = panelElement;
+    if (!mounted || !open || !panel || !panel.isConnected || panel.contains(document.activeElement)) return;
+    if (searchable && searchElement) {
+      searchElement.focus();
+      return;
+    }
+    const first = flatVisibleNodes[0];
+    if (first) await focusTreeNode(first.node.value);
+    if (!mounted || !open || panelElement !== panel || !panel.isConnected) return;
+    if (!panel.contains(document.activeElement)) panel.focus();
+  }
+
+  async function handleCloseAutoFocus(event: Event): Promise<void> {
+    event.preventDefault();
+    const preserveOutsideFocus = closedByOutsideInteraction;
+    const focusTarget = outsideFocusTarget;
+    await tick();
+    if (!mounted || open) return;
+    if (preserveOutsideFocus) {
+      const active = document.activeElement;
+      if (focusTarget?.isConnected
+        && (active === document.body || controlElement?.contains(active) || panelElement?.contains(active))) {
+        focusTarget.focus();
+      }
+      return;
+    }
+    triggerElement?.focus();
+  }
+
+  function handleInteractOutside(event: Event): void {
+    // 控制区内的触发/清空仍回焦本实例，真正的外部操作保留新焦点。
+    if (event.target instanceof Node && !controlElement?.contains(event.target)) {
+      closedByOutsideInteraction = true;
+      outsideFocusTarget = event.target instanceof HTMLElement ? event.target : undefined;
+    }
+  }
+
+  function handleWindowFocusIn(event: FocusEvent): void {
+    if (!open || !(event.target instanceof HTMLElement)) return;
+    if (panelElement?.contains(event.target) || controlElement?.contains(event.target)) return;
+    closedByOutsideInteraction = true;
+    outsideFocusTarget = event.target;
+    open = false;
+  }
+
+  function handleSearchKeydown(event: KeyboardEvent): void {
+    if (event.key !== 'ArrowDown' || event.isComposing || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+    const first = flatVisibleNodes[0];
+    if (!first) return;
+    event.preventDefault();
+    void focusTreeNode(first.node.value);
+  }
+
   function handleTreeKeydown(event: KeyboardEvent, node: TreeSelectOption, expanded: boolean): void {
-    if (event.target !== event.currentTarget) return;
-    const nodeHasChildren = hasChildren(node);
+    if (event.target !== event.currentTarget || event.isComposing || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+    const sourceNode = optionMap.get(node.value) ?? node;
+    const nodeHasChildren = hasChildren(sourceNode);
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
-      void handleSelect(node);
+      if (loads.get(node.value)?.retrying) return;
+      if (loadErrors.has(node.value) || selectionErrors.has(node.value)) retryChildren(sourceNode, event);
+      else void handleSelect(node);
     } else if (event.key === 'ArrowDown') {
       event.preventDefault();
       focusSibling(node.value, 1);
@@ -405,7 +565,12 @@
       if (last) void focusTreeNode(last.node.value);
     } else if (event.key === 'ArrowRight' && nodeHasChildren) {
       event.preventDefault();
-      if (!expanded) void toggleExpandAsync(node);
+      if (disabled || disabledValues.has(sourceNode.value)) return;
+      if (searchQuery.trim() && !sourceNode.children) {
+        if (lacksLoadCapability(sourceNode)) capabilityErrors.add(sourceNode.value);
+        else void ensureChildren(sourceNode);
+      }
+      else if (!expanded) void toggleExpandAsync(sourceNode);
       else {
         const index = flatVisibleNodes.findIndex(entry => entry.node.value === node.value);
         const current = flatVisibleNodes[index];
@@ -426,20 +591,24 @@
     event?.stopPropagation();
     if (disabled) return;
     selectionAttempt = undefined;
+    open = false;
     const next = multiple ? [] : undefined;
     value = next;
     onchange?.(next);
+    triggerElement?.focus();
   }
 
   function removeSingle(val: string | number, event?: MouseEvent | KeyboardEvent) {
     event?.stopPropagation();
     if (disabled) return;
     selectionAttempt = undefined;
+    open = false;
     if (multiple) {
       const next = selectedValues.filter((v) => v !== val);
       value = next;
       onchange?.(next);
     }
+    triggerElement?.focus();
   }
 
   function filterTree(nodes: TreeSelectOption[], query: string): TreeSelectOption[] {
@@ -488,6 +657,13 @@
   const clampedScrollTop = $derived(Math.max(0, Math.min(treeScrollTop, totalHeight - windowHeight)));
   const virtualStart = $derived(Math.max(0, Math.floor(clampedScrollTop / rowHeight) - 5));
   const virtualEnd = $derived(Math.min(flatVisibleNodes.length, Math.ceil((clampedScrollTop + windowHeight) / rowHeight) + 5));
+  const renderedNodes = $derived(shouldVirtualize
+    ? flatVisibleNodes.slice(virtualStart, virtualEnd)
+    : flatVisibleNodes);
+  // 当前节点被过滤、折叠或滚出渲染窗口时，仍保留一个有效的 Tab 入口。
+  const tabStopValue = $derived(renderedNodes.some(entry => entry.node.value === activeTreeValue)
+    ? activeTreeValue
+    : renderedNodes[0]?.node.value);
 
   $effect(() => {
     // 搜索和外部数据替换从顶部开始；折叠或数据缩短只钳制窗口。
@@ -511,11 +687,17 @@
   {@const partial = isPartiallySelected(node)}
   {@const busy = selectionAttempt?.key === node.value || loadingValues.has(node.value)}
   {@const unavailable = disabled || disabledValues.has(node.value)}
+  {@const currentNodeId = nodeId(node.value)}
+  {@const hasRenderedGroup = recursive && nodeHasChildren && expanded && !!node.children?.length}
 
   <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed">
     <div
       role="treeitem"
-      tabindex="0"
+      id={currentNodeId}
+      tabindex={tabStopValue === node.value ? 0 : -1}
+      aria-label={node.label}
+      aria-owns={hasRenderedGroup ? `${currentNodeId}-group` : undefined}
+      aria-describedby={loadErrors.has(node.value) || selectionErrors.has(node.value) || capabilityErrors.has(node.value) ? `${currentNodeId}-error` : undefined}
       aria-selected={selected}
       aria-checked={multiple ? (partial ? 'mixed' : selected) : undefined}
       aria-disabled={unavailable ? 'true' : undefined}
@@ -533,17 +715,22 @@
       )}
       style={`padding-left:${level * 16 + 8}px;${recursive ? '' : `height:${rowHeight}px;min-height:${rowHeight}px;box-sizing:border-box;overflow:hidden;`}`}
       onclick={() => void handleSelect(node)}
+      onfocus={() => { activeTreeValue = node.value; }}
       onkeydown={(e) => handleTreeKeydown(e, node, expanded)}
     >
       <div class="svadmin-u-60fbb7713999 svadmin-u-7e0b7cdf1a94 svadmin-u-3960ffc248d9 svadmin-u-58284b4ea568">
         {#if nodeHasChildren}
           <button
             type="button"
+            tabindex="-1"
             disabled={unavailable}
             aria-label={`${node.label}: ${i18n.t('tree.toggleChildren')}`}
             aria-busy={busy}
             class="svadmin-u-60fbb7713999 svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-07389a777c1f svadmin-u-bfa603190748 svadmin-u-8e551981c8d7"
-            onclick={(e) => void toggleExpandAsync(node, e)}
+            onclick={(e) => {
+              ownerTreeItem(e)?.focus();
+              void toggleExpandAsync(node, e);
+            }}
           >
             {#if busy}
               <Loader2 class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-afbdd13a380e" />
@@ -560,13 +747,16 @@
         <span class="svadmin-u-f283ea9bea0e">{node.label}</span>
       </div>
 
-      {#if loadErrors.has(node.value) || selectionErrors.has(node.value)}
-        <span role="alert" class="svadmin-u-bfa603190748">{i18n.t(selectionErrors.has(node.value) ? 'tree.selectionFailed' : 'tree.loadFailed')}</span>
-        <button type="button" aria-label={`${node.label}: ${i18n.t('common.retry')}`}
-          disabled={unavailable}
-          title={i18n.t('common.retry')} onclick={(e) => retryChildren(node, e)}>
-          <RotateCw class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
-        </button>
+      {#if loadErrors.has(node.value) || selectionErrors.has(node.value) || capabilityErrors.has(node.value)}
+        <span id={`${currentNodeId}-error`} role="alert" class="svadmin-u-bfa603190748">{i18n.t(capabilityErrors.has(node.value) ? 'tree.childrenUnavailable' : selectionErrors.has(node.value) ? 'tree.selectionFailed' : 'tree.loadFailed')}</span>
+        {#if !capabilityErrors.has(node.value)}
+          <button type="button" aria-label={`${node.label}: ${i18n.t('common.retry')}`}
+            tabindex="-1"
+            disabled={unavailable}
+            title={i18n.t('common.retry')} onclick={(e) => retryChildren(node, e)}>
+            <RotateCw class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
+          </button>
+        {/if}
       {/if}
 
       {#if partial}
@@ -577,7 +767,7 @@
     </div>
 
     {#if recursive && nodeHasChildren && expanded && node.children}
-      <div role="group" class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed">
+      <div id={`${currentNodeId}-group`} role="group" class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed">
         {#each node.children as child, index (treeKey(child.value))}
           {@render treeNode(child, level + 1, index + 1, node.children.length)}
         {/each}
@@ -586,20 +776,39 @@
   </div>
 {/snippet}
 
+<svelte:window onfocusin={handleWindowFocusIn} />
+
 <div class={cn('svadmin-u-d89972fe17d6 svadmin-u-6da6a3c3f741', className)} data-testid="tree-select">
   <Popover.Root bind:open>
-    <Popover.Trigger class="svadmin-u-6da6a3c3f741">
+    <Popover.Trigger id={triggerId} {disabled} class="svadmin-u-6da6a3c3f741">
       {#snippet child({ props })}
-        <button
-          type="button"
-          {...props}
-          {disabled}
+        <div bind:this={controlElement}
+          data-disabled={disabled || undefined}
+          data-invalid={invalid || undefined}
           class={cn(
+            'tree-select-control',
             'svadmin-u-60fbb7713999 svadmin-u-968a1e649bad svadmin-u-6da6a3c3f741 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-359090c2d529 svadmin-u-582e6ef4b245 svadmin-u-9c24ab70af61 svadmin-u-674ec2b09890 svadmin-u-608dd26cd5ba svadmin-u-80b9d0ae125f svadmin-u-6b22a22a9752 svadmin-u-5f533b3a7de7 svadmin-u-b29d8adbad2e svadmin-u-2eba0d65d059',
             open && 'svadmin-u-16b1efa5875e svadmin-u-3e1868fc53e2 svadmin-u-0c15f6cff5a0'
           )}
         >
-          <div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421 svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c">
+          <button
+            {...props}
+            type="button"
+            bind:this={triggerElement}
+            aria-label={ariaLabel?.trim() ? ariaLabel : undefined}
+            aria-controls={open ? panelId : undefined}
+            aria-describedby={describedby}
+            data-invalid={invalid || undefined}
+            {disabled}
+            class="tree-select-trigger"
+          >
+            <span class="svadmin-u-2daa8e5e2f2e">
+              {selectedLabels.length ? selectedLabels.join(', ') : placeholder ?? i18n.t('field.selectPlaceholder')}
+            </span>
+          </button>
+          <div
+            class="tree-select-display svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421 svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c"
+          >
             {#if selectedValues.length === 0}
               <span class="svadmin-u-bfa603190748">
                 {placeholder ?? (i18n.t('field.selectPlaceholder', undefined) ?? '请选择...')}
@@ -610,21 +819,14 @@
                 <Badge variant="secondary" class="svadmin-u-cd0d9c512cdc svadmin-u-45d828117213 svadmin-u-68ecb30dbec6 svadmin-u-d058ca6de60f svadmin-u-44ee8ba0a421 svadmin-u-012fbd121f37">
                   <span>{opt?.label ?? val}</span>
                   {#if !disabled}
-                    <span
-                      role="button"
-                      tabindex="0"
+                    <button type="button" tabindex="0"
                       aria-label={i18n.t('tree.removeSelection', { label: opt?.label ?? String(val) })}
-                      class="svadmin-u-51e95020d6f2 svadmin-u-34516836730d"
+                      title={i18n.t('tree.removeSelection', { label: opt?.label ?? String(val) })}
+                      class="tree-select-action svadmin-u-51e95020d6f2 svadmin-u-34516836730d"
                       onclick={(e) => removeSingle(val, e)}
-                      onkeydown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                          e.preventDefault();
-                          removeSingle(val, e);
-                        }
-                      }}
                     >
                       <X class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29" />
-                    </span>
+                    </button>
                   {/if}
                 </Badge>
               {/each}
@@ -635,37 +837,42 @@
             {/if}
           </div>
 
-          <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421 svadmin-u-012fbd121f37 svadmin-u-f58b02572ab2 svadmin-u-bfa603190748">
+          <div
+            class="tree-select-display svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421 svadmin-u-012fbd121f37 svadmin-u-f58b02572ab2 svadmin-u-bfa603190748"
+          >
             {#if allowClear && selectedValues.length > 0 && !disabled}
-              <span
-                role="button"
-                tabindex="0"
+              <button type="button" tabindex="0"
                 aria-label={i18n.t('common.clearSelection')}
-                class="svadmin-u-ea7b2e9e070e svadmin-u-34516836730d svadmin-u-de8350a3bbad"
+                title={i18n.t('common.clearSelection')}
+                class="tree-select-action svadmin-u-ea7b2e9e070e svadmin-u-34516836730d svadmin-u-de8350a3bbad"
                 onclick={clearAll}
-                onkeydown={(e) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    clearAll(e);
-                  }
-                }}
               >
                 <X class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
-              </span>
+              </button>
             {/if}
             <ChevronsUpDown class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-0b8c506a0596" />
           </div>
-        </button>
+        </div>
       {/snippet}
     </Popover.Trigger>
 
-    <Popover.Content class="svadmin-u-4827635fb99f svadmin-u-cbc20887874e svadmin-u-7b17becb34a1 svadmin-u-7660b450905a" align="start">
+    <Popover.Content id={panelId} role="dialog" aria-labelledby={triggerId}
+      onOpenAutoFocus={handleOpenAutoFocus} onCloseAutoFocus={handleCloseAutoFocus}
+      onInteractOutside={handleInteractOutside}
+      class="svadmin-u-4827635fb99f svadmin-u-cbc20887874e svadmin-u-7b17becb34a1 svadmin-u-7660b450905a" align="start">
+      {#snippet child({ props, wrapperProps })}
+      <div {...wrapperProps}>
+      <div {...props} id={panelId} bind:this={panelElement}>
       {#if searchable}
         <div class="svadmin-u-d89972fe17d6 svadmin-u-a77ed4d908c0">
           <Search class="svadmin-u-da4dbfbc4fdc svadmin-u-ecfeb742a3f3 svadmin-u-7a470f4c9b28 svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-bfa603190748" />
           <Input
             type="text"
+            bind:ref={searchElement}
             bind:value={searchQuery}
+            aria-label={i18n.t('common.search')}
+            aria-controls={treeId}
+            onkeydown={handleSearchKeydown}
             placeholder={i18n.t('common.search', undefined) ?? '搜索...'}
             class="svadmin-u-ed8a5df7b2fb svadmin-u-e4af885410fe svadmin-u-aa2c13a5e1b4 svadmin-u-359090c2d529"
           />
@@ -674,7 +881,10 @@
 
       <div
         bind:this={treeRoot}
+        id={treeId}
         role="tree"
+        tabindex="-1"
+        aria-label={ariaLabel ?? placeholder ?? i18n.t('field.selectPlaceholder')}
         aria-multiselectable={multiple ? 'true' : undefined}
         class="svadmin-u-67d7e383dca6 svadmin-u-92bf82f493b1 svadmin-u-e2eedc5718f0 svadmin-u-eda955402ba6"
         style={shouldVirtualize ? `height:${windowHeight}px;max-height:${windowHeight}px;overflow-y:auto;padding:0;` : undefined}
@@ -683,7 +893,7 @@
         {#if shouldVirtualize}
           <div style={`height:${totalHeight}px;position:relative;`}>
             <div style={`position:absolute;top:${virtualStart * rowHeight}px;left:0;right:0;`}>
-              {#each flatVisibleNodes.slice(virtualStart, virtualEnd) as entry (treeKey(entry.node.value))}
+              {#each renderedNodes as entry (treeKey(entry.node.value))}
                 {@render treeNode(entry.node, entry.level, entry.position, entry.size, false)}
               {/each}
             </div>
@@ -698,6 +908,56 @@
           </div>
         {/if}
       </div>
+      </div>
+      </div>
+      {/snippet}
     </Popover.Content>
   </Popover.Root>
 </div>
+
+<style>
+  .tree-select-control {
+    position: relative;
+    isolation: isolate;
+    min-inline-size: 0;
+  }
+  .tree-select-trigger {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    cursor: pointer;
+  }
+  .tree-select-trigger:focus-visible,
+  .tree-select-action:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+  .tree-select-control[data-disabled] {
+    opacity: 0.5;
+  }
+  .tree-select-trigger:disabled {
+    cursor: not-allowed;
+  }
+  .tree-select-display {
+    position: relative;
+    z-index: 1;
+    pointer-events: none;
+    min-inline-size: 0;
+  }
+  .tree-select-action {
+    pointer-events: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+  }
+</style>