@selkit/dom 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -170,6 +170,8 @@ var SelkitDom = class {
   #hiddenContainer = null;
   #selectPrevDisplay = "";
   #dragFrom = -1;
+  /** 上次已捲入可視的 activeIndex 僅在變動時才捲 避免跟使用者手動捲動打架 */
+  #lastActive = -1;
   #positioner = null;
   #unsubscribe;
   #offClose;
@@ -442,6 +444,37 @@ var SelkitDom = class {
     this.#syncForm();
     this.element.classList.toggle(this.#cls("", "open"), s.isOpen);
     this.element.classList.toggle(this.#cls("", "disabled"), s.disabled);
+    this.#scrollActiveIntoView(s);
+  }
+  /**
+   * 鍵盤導航/開啟時讓作用中選項保持可見（aria-activedescendant 完整度）
+   * 僅在 activeIndex 變動時動作 手動捲動觸發的重繪不會跟著捲
+   */
+  #scrollActiveIntoView(s) {
+    if (!s.isOpen) {
+      this.#lastActive = -1;
+      return;
+    }
+    if (s.activeIndex === this.#lastActive || s.activeIndex < 0) return;
+    this.#lastActive = s.activeIndex;
+    const hasGroups = this.controller.getGroupedView().rows.some((r) => r.type === "group");
+    if (this.#virtual && !hasGroups) {
+      const next = (0, import_core.computeScrollIntoView)({
+        index: s.activeIndex,
+        scrollTop: this.#dropdown.scrollTop,
+        viewportHeight: this.#dropdown.clientHeight,
+        itemHeight: this.#itemHeight
+      });
+      if (next !== null) {
+        this.#dropdown.scrollTop = next;
+        this.#renderOptions(s);
+      }
+      return;
+    }
+    const active = this.#dropdown.querySelector(
+      `.${this.#cls("option", "active")}`
+    );
+    active?.scrollIntoView?.({ block: "nearest" });
   }
   /** 套用模板輸出：字串走 textContent（防 XSS）Node 直接掛入 */
   #applyTemplate(host, out) {

package/dist/index.js

@@ -1,5 +1,9 @@
 // src/dom.ts
-import { computeVirtualRange, createSelkit } from "@selkit/core";
+import {
+  computeScrollIntoView,
+  computeVirtualRange,
+  createSelkit
+} from "@selkit/core";
 
 // src/positioner.ts
 function computePosition(triggerRect, dropdownHeight, viewportHeight, gap = 4) {
@@ -139,6 +143,8 @@ var SelkitDom = class {
   #hiddenContainer = null;
   #selectPrevDisplay = "";
   #dragFrom = -1;
+  /** 上次已捲入可視的 activeIndex 僅在變動時才捲 避免跟使用者手動捲動打架 */
+  #lastActive = -1;
   #positioner = null;
   #unsubscribe;
   #offClose;
@@ -411,6 +417,37 @@ var SelkitDom = class {
     this.#syncForm();
     this.element.classList.toggle(this.#cls("", "open"), s.isOpen);
     this.element.classList.toggle(this.#cls("", "disabled"), s.disabled);
+    this.#scrollActiveIntoView(s);
+  }
+  /**
+   * 鍵盤導航/開啟時讓作用中選項保持可見（aria-activedescendant 完整度）
+   * 僅在 activeIndex 變動時動作 手動捲動觸發的重繪不會跟著捲
+   */
+  #scrollActiveIntoView(s) {
+    if (!s.isOpen) {
+      this.#lastActive = -1;
+      return;
+    }
+    if (s.activeIndex === this.#lastActive || s.activeIndex < 0) return;
+    this.#lastActive = s.activeIndex;
+    const hasGroups = this.controller.getGroupedView().rows.some((r) => r.type === "group");
+    if (this.#virtual && !hasGroups) {
+      const next = computeScrollIntoView({
+        index: s.activeIndex,
+        scrollTop: this.#dropdown.scrollTop,
+        viewportHeight: this.#dropdown.clientHeight,
+        itemHeight: this.#itemHeight
+      });
+      if (next !== null) {
+        this.#dropdown.scrollTop = next;
+        this.#renderOptions(s);
+      }
+      return;
+    }
+    const active = this.#dropdown.querySelector(
+      `.${this.#cls("option", "active")}`
+    );
+    active?.scrollIntoView?.({ block: "nearest" });
   }
   /** 套用模板輸出：字串走 textContent（防 XSS）Node 直接掛入 */
   #applyTemplate(host, out) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selkit/dom",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Vanilla JS renderer for Selkit — DOM, events, a11y and default positioner.",
   "license": "MIT",
   "type": "module",
@@ -19,7 +19,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@selkit/core": "0.2.0"
+    "@selkit/core": "0.3.0"
   },
   "devDependencies": {
     "axe-core": "^4.12.1",