forge-select 0.7.1 → 0.7.2

package/README.md

@@ -61,8 +61,6 @@ Browse the documentation website at **<https://forgeselect.konexforge.com/docs/>
 - Internationalization (en/vi built in, custom string tables)
 - TypeScript Support (written in strict TypeScript, ships `.d.ts`)
 
-> Planned/in-progress capabilities — Angular/Svelte wrappers — are tracked in the [Roadmap](#roadmap) below and intentionally not listed above as shipped features.
-
 ## Installation
 
 ```bash
@@ -189,8 +187,8 @@ Forge Select is vanilla TypeScript/JavaScript, so it can be mounted inside any f
 - Vanilla JavaScript
 - React — via [`forge-select-react`](./packages/react/README.md) (`ForgeSelectReact` component, controlled `value`/`onChange`)
 - Vue — via [`forge-select-vue`](./packages/vue/README.md) (`ForgeSelectVue` component, `v-model` support)
-- Angular — mount manually for now; a dedicated wrapper is on the [Roadmap](#roadmap)
-- Svelte — mount manually for now; a dedicated wrapper is on the [Roadmap](#roadmap)
+- Angular — mount manually (see [`docs/examples.md`](./docs/examples.md))
+- Svelte — mount manually (see [`docs/examples.md`](./docs/examples.md))
 - Next.js
 - Nuxt
 - Astro
@@ -221,8 +219,6 @@ Run `npm run bench` for a reproducible JSON baseline covering bundle size, initi
 - [x] CSS Variables
 - [x] React Component
 - [x] Vue Component
-- [ ] Angular Component
-- [ ] Svelte Component
 
 ## Plugin Development Guide
 

package/dist/index.cjs

@@ -351,6 +351,12 @@ var ForgeSelect = class {
     this.highlightedIndex = -1;
     this.typeaheadBuffer = "";
     this.typeaheadTimer = null;
+    // Keyed by the option object, not its value: duplicateValuePolicy only warns
+    // by default, so two options can share a value while carrying different
+    // labels, and a value-keyed cache would render the first one's content for
+    // both. Still explicitly bounded — a WeakMap would not collect anything while
+    // `data` holds every key, so scrolling a long list would retain a detached
+    // node per option visited.
     this.rowContentCache = /* @__PURE__ */ new Map();
     this.rowElementCache = /* @__PURE__ */ new Map();
     this.rowHeightCache = /* @__PURE__ */ new Map();
@@ -538,8 +544,21 @@ var ForgeSelect = class {
     this.typeaheadBuffer = "";
     this.highlightedIndex = -1;
     if (this.searchInput) {
+      const hadQuery = this.query !== "";
       this.searchInput.value = "";
       this.query = "";
+      if (hadQuery && this.opts.ajax) {
+        this.ajaxRequestId += 1;
+        if (this.ajaxTimer) {
+          clearTimeout(this.ajaxTimer);
+          this.ajaxTimer = null;
+        }
+        this.ajaxController?.abort();
+        this.ajaxController = null;
+        this.setLoading(false);
+        this.loadingMore = false;
+        this.remoteLoaded = false;
+      }
     }
     this.emitter.emit("close");
     for (const plugin of this.plugins) plugin.onClose?.(this);
@@ -1589,11 +1608,28 @@ var ForgeSelect = class {
     this.rowHeightCache.clear();
     this.rowOffsetsCache = null;
   }
+  /** Identifies a row *position*, which is what measured heights are tied to. */
   rowKey(row, index) {
     if (row.kind === "option") return `option:${row.option.value}:${index}`;
     if (row.kind === "group") return `group:${row.label}:${index}`;
     return `${row.kind}:${index}`;
   }
+  /**
+   * Identifies a row's *content* for `<li>` recycling, deliberately without the
+   * row index: filtering shifts every index below the first change, so an
+   * index-keyed element cache misses on every keystroke — exactly when the list
+   * re-renders most. renderRow() rewrites the element completely, so reusing it
+   * at a new position is safe.
+   *
+   * Keys are not guaranteed unique within a render — duplicateValuePolicy
+   * defaults to warning rather than rejecting duplicate values — so callers
+   * must not hand the same element to two rows of one render.
+   */
+  rowElementKey(row) {
+    if (row.kind === "option") return `option:${row.option.value}`;
+    if (row.kind === "group") return `group:${row.label}`;
+    return row.kind;
+  }
   measuredRowHeight(index) {
     return this.opts.variableItemHeight ? this.rowHeightCache.get(this.rowKey(this.rows[index], index)) ?? this.opts.itemHeight : this.opts.itemHeight;
   }
@@ -1655,9 +1691,12 @@ var ForgeSelect = class {
       this.list.append(topSpacer);
     }
     const appended = [];
+    const claimed = /* @__PURE__ */ new Set();
     for (let i = start; i < end; i++) {
-      const key = this.rowKey(this.rows[i], i);
-      const element = this.renderRow(this.rows[i], this.rowElementCache.get(key));
+      const key = this.rowElementKey(this.rows[i]);
+      const cached = this.rowElementCache.get(key);
+      const element = this.renderRow(this.rows[i], cached && !claimed.has(cached) ? cached : void 0);
+      claimed.add(element);
       this.rowElementCache.set(key, element);
       if (this.rowElementCache.size > ROW_CACHE_LIMIT) {
         const oldest = this.rowElementCache.keys().next().value;
@@ -1827,7 +1866,7 @@ var ForgeSelect = class {
       }
       return holder;
     }
-    let cached = this.rowContentCache.get(option.value);
+    let cached = this.rowContentCache.get(option);
     if (!cached) {
       const holder = document.createElement("span");
       holder.className = "forge-select__option-content";
@@ -1836,7 +1875,7 @@ var ForgeSelect = class {
         const oldest = this.rowContentCache.keys().next().value;
         this.rowContentCache.delete(oldest);
       }
-      this.rowContentCache.set(option.value, holder);
+      this.rowContentCache.set(option, holder);
       cached = holder;
     }
     return cached.cloneNode(true);