selective-ui 1.4.1 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "selective-ui",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "An overlay for the HTML select element.",
   "author": "Huỳnh Công Xuân Mai",
   "license": "MIT",

package/src/css/views/option-view.css

@@ -56,9 +56,9 @@
 
 .seui-option-view > label > div {
     width: 100%;
-    height: 100%;
+    /* height: 100%; */
 
-    display: flex;
+    /* display: flex; */
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

package/src/ts/adapter/mixed-adapter.ts

@@ -610,7 +610,7 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
      * @returns {void}
      */
     public resetHighlight(): void {
-        this.setHighlight(0);
+        this.setHighlight(0, false);
     }
 
     /**
@@ -716,10 +716,9 @@ export class MixedAdapter extends Adapter<MixedItem, GroupView | OptionView> {
 
             if (isScrollToView) {
                 const el = item.view?.getView?.();
-                if (el) {
+                if (el?.isConnected) {
                     el.scrollIntoView({ block: "center", behavior: "smooth" });
                 } else {
-                    // If virtualized, ensure the item is rendered before trying to scroll.
                     this.recyclerView?.ensureRendered?.(i, {
                         scrollIntoView: true,
                     });

package/src/ts/components/selectbox.ts

@@ -471,6 +471,7 @@ export class SelectBox extends Lifecycle {
         );
 
         Refresher.resizeBox(select, container.tags.ViewPanel);
+        Refresher.resizeBox(select, this.node, true);
         select.classList.add("init");
 
         // initial mask
@@ -836,7 +837,7 @@ export class SelectBox extends Lifecycle {
             get mask() {
                 const item_list: string[] = [];
                 superThis.getModelOption(true).forEach((m) => {
-                    item_list.push(m.text);
+                    item_list.push(m.mask);
                 });
                 return item_list;
             },
@@ -988,6 +989,9 @@ export class SelectBox extends Lifecycle {
 
                 // AJAX: load missing values
                 if (container.searchController?.isAjax?.()) {
+                    container.searchController.resetPagination();
+                    superThis.hasLoadedOnce = false;
+
                     const { missing } =
                         container.searchController.checkMissingValues(value);
 
@@ -997,7 +1001,6 @@ export class SelectBox extends Lifecycle {
                                 container.popup?.showLoading?.();
 
                             try {
-                                container.searchController.resetPagination();
                                 const result =
                                     await container.searchController.loadByValues(
                                         missing,
@@ -1026,6 +1029,10 @@ export class SelectBox extends Lifecycle {
                                         `Could not load ${missing.length} values:`,
                                         missing,
                                     );
+                                    setTimeout(() => {
+                                        container.searchController.resetPagination();
+                                        this.change(false, trigger);
+                                    }, 200);
                                 }
                             } catch (error) {
                                 console.error(
@@ -1121,7 +1128,13 @@ export class SelectBox extends Lifecycle {
 
                 this.load();
                 container.popup.open(
-                    null,
+                    () => {
+                        setTimeout(() => {
+                            if (selectedOption) {
+                                adapter.setHighlight(selectedOption, bindedOptions.autoscroll);
+                            }
+                        }, 100);
+                    },
                     !container.popup.loadingState.isVisible,
                 );
 
@@ -1292,7 +1305,9 @@ export class SelectBox extends Lifecycle {
                             .search("")
                             .then(() => {
                                 container.popup?.triggerResize?.();
-                                resove(getInstance());
+                                setTimeout(() => {
+                                    resove(getInstance());
+                                }, 60);
                             })
                             .catch((err: unknown) => {
                                 console.error("Initial ajax load error:", err);

package/src/ts/core/base/adapter.ts

@@ -95,6 +95,17 @@ export class Adapter<
      */
     recyclerView: any;
 
+    /**
+     * Tracks all scheduler keys registered by this adapter instance via
+     * {@link onPropChanging} and {@link onPropChanged}.
+     *
+     * Used during {@link destroy} to clean up all associated pipelines
+     * from the global {@link Libs.callbackScheduler}.
+     *
+     * Keys are deduplicated automatically by Set semantics.
+     */
+    callbackSchedulerList: Set<string> = new Set();
+
     /**
      * Creates an adapter with an optional initial item list and initializes its lifecycle.
      *
@@ -153,11 +164,13 @@ export class Adapter<
         propName: string,
         callback: (...args: unknown[]) => void,
     ): void {
+        const key = `${propName}ing_${this.adapterKey}`;
         Libs.callbackScheduler.on(
-            `${propName}ing_${this.adapterKey}`,
+            key,
             callback,
             { debounce: 0 },
         );
+        this.callbackSchedulerList.add(key);
     }
 
     /**
@@ -177,9 +190,11 @@ export class Adapter<
         propName: string,
         callback: (...args: unknown[]) => void,
     ): void {
-        Libs.callbackScheduler.on(`${propName}_${this.adapterKey}`, callback, {
+        const key = `${propName}_${this.adapterKey}`;
+        Libs.callbackScheduler.on(key, callback, {
             debounce: 0,
         });
+        this.callbackSchedulerList.add(key);
     }
 
     /**
@@ -341,10 +356,17 @@ export class Adapter<
             return;
         }
 
+        this.callbackSchedulerList.forEach((key) => {
+            Libs.callbackScheduler.off(key);
+        });
+
+        this.callbackSchedulerList.clear();
         this.recyclerView = null;
         this.items.forEach((item) => {
             item?.destroy?.();
         });
         this.items = [];
+
+        super.destroy();
     }
 }

package/src/ts/core/base/virtual-recyclerview.ts

@@ -122,6 +122,12 @@ export class VirtualRecyclerView<
     private suspended = false;
     private boundOnScroll?: () => void;
     private resumeResizeAfter = false;
+    /**
+     * When set, scrollToIndex() will be called after the next measureVisibleAndUpdate()
+     * completes and Fenwick has been updated with real heights.
+     * Set by ensureRendered() and cleared after the corrective scroll fires.
+     */
+    private pendingScrollToIndex: number | null = null;
 
     /** Small cache for sticky header height (≈16ms TTL) to limit layout reads. */
     private stickyCacheTick = 0;
@@ -332,8 +338,21 @@ export class VirtualRecyclerView<
         index: number,
         opt?: { scrollIntoView?: boolean },
     ): void {
-        this.mountRange(index, index);
-        if (opt?.scrollIntoView) this.scrollToIndex(index);
+        if (!opt?.scrollIntoView) {
+            // No scroll requested — mount only (legacy path, used by probes).
+            this.mountRange(index, index);
+            return;
+        }
+
+        // Pass 1: instant — brings window to vicinity, triggers measure.
+        // Must be instant so Pass 2 smooth scroll isn't interrupted mid-animation.
+        this.scrollToIndex(index, "instant");
+
+        // Pass 2: measureVisibleAndUpdate() will consume this and fire a corrective
+        // smooth scroll after Fenwick has been updated with real heights.
+        // rv.resume() is guaranteed to run before this callback (popup.open onComplete
+        // calls rv.resume() first), so the window is already rendered when we arrive here.
+        this.pendingScrollToIndex = index;
     }
 
     /**
@@ -348,19 +367,32 @@ export class VirtualRecyclerView<
      * @param {number} index - Item index to bring into view.
      * @returns {void}
      */
-    public scrollToIndex(index: number): void {
+    public scrollToIndex(index: number, behavior: ScrollBehavior = "smooth"): void {
         const count = this.adapter?.itemCount?.() ?? 0;
         if (count <= 0) return;
 
         const topInContainer = this.offsetTopOf(index);
         const containerTop = this.containerTopInScroll();
-        const target = containerTop + topInContainer;
+        const stickyH = this.stickyTopHeight();
+        const viewportH = Math.max(0, this.scrollEl.clientHeight - stickyH);
+
+        // item height from cache, or current estimate for unmeasured items
+        const est = this.getEstimate();
+        const itemH = this.heightCache[index] ?? est;
+
+        // Align item center to viewport center (below any sticky header).
+        // viewportH already excludes stickyH, so no further offset needed.
+        // Equivalent to scrollIntoView({ block: "center" }).
+        const centeredTarget = containerTop + topInContainer
+            - (viewportH - itemH) / 3;
+
         const maxScroll = Math.max(
             0,
             this.scrollEl.scrollHeight - this.scrollEl.clientHeight,
         );
 
-        this.scrollEl.scrollTop = Math.min(Math.max(0, target), maxScroll);
+        const clamped = Math.min(Math.max(0, centeredTarget), maxScroll);
+        this.scrollEl.scrollTo({ top: clamped, behavior });
     }
 
     /**
@@ -435,9 +467,24 @@ export class VirtualRecyclerView<
         if (count <= 0) return;
 
         this.suspend();
-        this.resetState();
+        this.pendingScrollToIndex = null;
+
+        // When visibility changes (search filter applied or cleared), heightCache may
+        // contain heights measured while only a subset of items was visible. Re-using
+        // these partial measurements in rebuildFenwick() causes incorrect prefix sums
+        // (e.g. items measured while scrolled into a filtered window have real heights,
+        // while surrounding items still use estimates — creating an uneven Fenwick).
+        //
+        // Safe fix: clear heightCache entirely on visibility change. The adaptive
+        // estimator will re-seed from probeInitialHeight() on the next render, and
+        // items will be re-measured as they scroll into view.
+        this.heightCache = [];
+        this.measuredSum = 0;
+        this.measuredCount = 0;
+        this.firstMeasured = false;
+
+        this.resetDOM();
         this.cleanupInvisibleItems();
-        this.recomputeMeasuredStats(count);
         this.rebuildFenwick(count);
         this.start = 0;
         this.end = -1;
@@ -457,7 +504,31 @@ export class VirtualRecyclerView<
     }
 
     /**
-     * Resets internal state: mounted elements, caches, Fenwick sums, padding, and estimator stats.
+     * Resets DOM nodes, Fenwick sums, padding, and estimator stats — but preserves {@link heightCache}.
+     *
+     * Use this inside {@link refreshItem} so that {@link recomputeMeasuredStats} can still
+     * read previously measured heights before the Fenwick tree is rebuilt.
+     *
+     * DOM side effects:
+     * - Removes all currently mounted item elements tracked in {@link created}.
+     * - Resets pad heights to `0px`.
+     *
+     * @returns {void}
+     */
+    private resetDOM(): void {
+        this.created.forEach((el) => el.remove());
+        this.created.clear();
+        this.fenwick.reset(0);
+        this.PadTop.style.height = "0px";
+        this.PadBottom.style.height = "0px";
+        this.firstMeasured = false;
+    }
+
+    /**
+     * Full reset: clears DOM nodes, Fenwick sums, padding, estimator stats, AND {@link heightCache}.
+     *
+     * Use this for complete teardown (e.g., adapter swap, destroy sequence) where all
+     * cached measurements should be discarded.
      *
      * DOM side effects:
      * - Removes all currently mounted item elements tracked in {@link created}.
@@ -843,6 +914,16 @@ export class VirtualRecyclerView<
             if (this.opts.adaptiveEstimate) this.rebuildFenwick(count);
             this.scheduleUpdateWindow();
         }
+
+        // Corrective scroll: if ensureRendered() registered a target index, fire
+        // scrollToIndex() now that real heights are in Fenwick. Clear the target
+        // first to prevent infinite re-triggering (scrollToIndex may cause another
+        // measure cycle, but heights won't change so changed === false next time).
+        if (this.pendingScrollToIndex !== null) {
+            const target = this.pendingScrollToIndex;
+            this.pendingScrollToIndex = null;
+            this.scrollToIndex(target, "smooth");
+        }
     }
 
     /**

package/src/ts/models/option-model.ts

@@ -266,6 +266,33 @@ export class OptionModel extends Model<
         );
     }
 
+    /**
+     * Resolved display mask for this option.
+     *
+     * The mask is the primary render label used by the UI layer and supports
+     * optional inline tag translation / rich HTML rendering.
+     *
+     * Source priority:
+     * 1. `data-mask` (`dataset.mask`)
+     * 2. Native `<option>` text content (`targetElement.text`)
+     *
+     * Processing pipeline:
+     * - Raw content is first passed through {@link Libs.tagTranslate}.
+     * - When `options.allowHtml === true`, translated HTML is preserved.
+     * - Otherwise, all markup is stripped via {@link Libs.stripHtml}.
+     *
+     * Unlike {@link text}, this getter prioritizes the custom dataset mask,
+     * making it suitable for display overrides without mutating the native
+     * `<option>` label.
+     *
+     * @returns {string} Render-ready option label.
+     */
+    public get mask(): string {
+        const raw = this.dataset?.mask ?? this.targetElement?.text ?? "";
+        const translated = Libs.tagTranslate(raw);
+        return this.options.allowHtml ? translated : Libs.stripHtml(translated);
+    }
+
     /**
      * Display label for rendering (with tag translation and HTML policy).
      *
@@ -279,7 +306,7 @@ export class OptionModel extends Model<
      * @returns {string}
      */
     public get text(): string {
-        const raw = this.dataset?.mask ?? this.targetElement?.text ?? "";
+        const raw = this.targetElement?.text ?? this.dataset?.mask ?? "";
         const translated = Libs.tagTranslate(raw);
         return this.options.allowHtml ? translated : Libs.stripHtml(translated);
     }

package/src/ts/services/refresher.ts

@@ -36,10 +36,12 @@ export class Refresher {
      *
      * @param select - Native `<select>` element used as the sizing reference and option source.
      * @param view - View panel element whose inline styles will be updated.
+     * @param isWidthOnly - If true, only the width will be updated; height will be left unchanged.
      */
     public static resizeBox(
         select: HTMLSelectElement,
         view: HTMLElement,
+        isWidthOnly = false,
     ): void {
         const bindedMap = Libs.getBinderMap<BinderMap>(select);
         if (!bindedMap?.options) return;
@@ -64,6 +66,10 @@ export class Refresher {
         if (cfgWidth > 0) width = options.width;
         if (cfgHeight > 0) height = options.height;
 
-        Object.assign(view.style, { width, height, minWidth, minHeight });
+        if (isWidthOnly) {
+            Object.assign(view.style, { width, maxWidth: width, minWidth });
+        } else {
+            Object.assign(view.style, { width, height, maxWidth: width, minWidth, minHeight });
+        }
     }
 }