flet-box 1.0.2 → 1.0.4

package/src/widgets/BottomSheet.js

@@ -58,6 +58,8 @@ export const BottomSheet = (props) => {
 
   let isOpen = false;
   let overlay = null;
+  // Pending "hide after the close animation" timer, so it can be cancelled.
+  let closeTimer = null;
   let sheetContainer = null;
   let startY = 0;
   let currentY = 0;
@@ -190,6 +192,18 @@ onclick: (e) => e.stopPropagation(), // ✅ Prevents the click from reaching the
   overlay.appendChild(sheetContainer);
   document.body.appendChild(overlay);
 
+  // The overlay lives in `document.body` and can be removed without `close()`
+  // ever running (state rebuild, route change, plain removeChild of the host).
+  // `_cleanup` is not called on that path, so release the document listener and
+  // any pending animation timer through the lifecycle hook too.
+  overlay.onUnmount(() => {
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+      closeTimer = null;
+    }
+    document.removeEventListener("keydown", handleKeyDown);
+  });
+
   // Drag handlers
   const onTouchStart = (e) => {
     // ✅ Prevent the drag event from propagating to the overlay
@@ -229,6 +243,11 @@ onclick: (e) => e.stopPropagation(), // ✅ Prevents the click from reaching the
   const open = () => {
     if (isOpen) return;
     isOpen = true;
+    // Cancel any pending hide from a close that is still animating out.
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+      closeTimer = null;
+    }
     overlay.style.visibility = "visible";
     overlay.style.opacity = "1";
     sheetContainer.style.transform = "translateY(0)";
@@ -250,7 +269,11 @@ onclick: (e) => e.stopPropagation(), // ✅ Prevents the click from reaching the
     isOpen = false;
     sheetContainer.style.transform = "translateY(100%)";
     overlay.style.opacity = "0";
-    setTimeout(() => {
+    // Keep the id: `open()` clears it, otherwise reopening within the animation
+    // window lets a stale timer hide an OPEN sheet (invisible but isOpen true).
+    if (closeTimer) clearTimeout(closeTimer);
+    closeTimer = setTimeout(() => {
+      closeTimer = null;
       overlay.style.visibility = "hidden";
     }, animationDuration);
     if (onClose) onClose();

package/src/widgets/Chart.js

@@ -134,7 +134,10 @@ export const Chart = (props) => {
     const paddingRange = range * 0.1;
     return {
       maxValue: maxVal + paddingRange,
-      minValue: Math.max(0, minVal - paddingRange),
+      // Do NOT clamp to 0. With all-negative data that inverts the range
+      // (min > max) and every point is drawn far outside the canvas, so the
+      // chart looks empty and the axis labels run from 0 to a negative max.
+      minValue: minVal - paddingRange,
     };
   };
 

package/src/widgets/Checkbox.js

@@ -67,13 +67,19 @@ export const Checkbox = (props) => {
 
   // Handle click
   if (!disabled) {
-    checkbox.onclick = (e) => {
+    const handleClick = (e) => {
       e.stopPropagation();
       const newChecked = !internalChecked;
       internalChecked = newChecked;
       updateUI(newChecked);
       if (onPress) onPress(newChecked);
     };
+    // Route the handler through the factory's props instead of assigning
+    // `onclick` directly. `assignProps` clears `onclick` on every update and only
+    // re-applies handlers it can see in the merged props, so a direct assignment
+    // died on the first `update()` — and every reactive setter (opacity, bgColor,
+    // padding…) calls update — leaving the control unable to toggle ever again.
+    checkbox.update({ onPress: handleClick });
 
     // Hover effect
     checkbox.addEventListener("mouseenter", () => {

package/src/widgets/CircularChart.js

@@ -335,7 +335,10 @@ export const CircularChart = (props) => {
     if (!ctx || !canvas) return;
     if (!startTime) {
       startTime = timestamp;
-      requestAnimationFrame(updateAnimation);
+      // Keep the id. The previous frame's id is already spent, so cleanup would
+      // cancel nothing and the pending frame kept re-arming forever on a detached
+      // canvas — and a re-`startAnimation()` could run two loops at once.
+      animationId = requestAnimationFrame(updateAnimation);
       return;
     }
     const elapsed = timestamp - startTime;

package/src/widgets/CodeViewer.js

@@ -4,6 +4,7 @@
  */
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
+import { composeUpdate } from "../utils/composeUpdate.js";
 import { generateHighlightedHtml } from "../utils/syntaxHighlight.js";
 
 export const CodeViewer = (props) => {
@@ -81,8 +82,14 @@ code = "",
     ...rest,
   });
 
-  // Header
-  if (currentTitle && showHeader) {
+  // Header. Built through a helper so a later `title` update can create one on a
+  // widget that was constructed without it.
+  const ensureHeader = (text) => {
+    if (!showHeader || !text) return null;
+    if (headerRef) {
+      headerRef.textContent = text;
+      return headerRef;
+    }
     headerRef = WidgetFactory({
       tag: "div",
       padding: "8px 12px",
@@ -91,10 +98,12 @@ code = "",
       color: "#fff",
       fontSize: "14px",
       fontWeight: "bold",
-      textContent: currentTitle,
+      textContent: text,
     });
-    container.appendChild(headerRef);
-  }
+    container.insertBefore(headerRef, container.firstChild);
+    return headerRef;
+  };
+  ensureHeader(currentTitle);
 
   // Scroll wrapper
   scrollWrapperRef = WidgetFactory({
@@ -209,11 +218,20 @@ code = "",
 
   container.updateTitle = (newTitle) => {
     currentTitle = newTitle;
-    if (headerRef) {
-      headerRef.textContent = currentTitle;
-    }
+    ensureHeader(currentTitle);
   };
 
+  // `title` is a reactive prop mapped to `textContent` in the prop database, so
+  // letting the factory see it would replace the header and the whole code
+  // wrapper with a bare text node. Own it and update the header instead.
+  composeUpdate(container, ["title"], (props) => {
+    if (props.title === undefined) return;
+    container.updateTitle(props.title);
+    // `makeReactive` rewrites the value into `_originalProps` on every setter
+    // call; leaving it there means the next factory update wipes the widget.
+    delete container._originalProps.title;
+  });
+
   container.scrollTo = (x, y) => {
     if (scrollWrapperRef) {
       scrollWrapperRef.scrollLeft = x;

package/src/widgets/DataTable.js

@@ -83,7 +83,9 @@ export const DataTable = (props) => {
   table.appendChild(thead);
 
   // ========== BODY ==========
-  const tbody = document.createElement("tbody");
+  // `let`, not `const`: `updateData` replaces the body and must re-point here,
+  // otherwise the second call tries to replace an already-detached node.
+  let tbody = document.createElement("tbody");
 
   rows.forEach((row, index) => {
     const tr = document.createElement("tr");
@@ -152,8 +154,12 @@ export const DataTable = (props) => {
 
   // Update table data
   container.updateData = (newRows) => {
+    // Snapshot BEFORE clearing. `updateColumns` calls this with `rows` itself as
+    // the argument, so clearing first and then spreading produced an empty body
+    // and every row silently disappeared.
+    const nextRows = [...newRows];
     rows.length = 0;
-    rows.push(...newRows);
+    rows.push(...nextRows);
 
     // Rebuild body
     const newTbody = document.createElement("tbody");
@@ -213,6 +219,9 @@ export const DataTable = (props) => {
     });
 
     table.replaceChild(newTbody, tbody);
+    // Re-point at the live node, otherwise the next call replaces an already
+    // detached node and throws NotFoundError.
+    tbody = newTbody;
   };
 
   // Update table columns

package/src/widgets/Dropdown.js

@@ -243,7 +243,11 @@ export const Dropdown = (props) => {
     if (outsideClickListener)
       document.removeEventListener("click", outsideClickListener);
     if (resizeListener) window.removeEventListener("resize", resizeListener);
-    if (scrollListener) window.removeEventListener("scroll", scrollListener);
+    // The capture flag MUST match the one used when adding (see the `scroll`
+    // registration below), otherwise the listener is never removed: every
+    // open/close cycle leaked one window listener holding the whole closure.
+    if (scrollListener)
+      window.removeEventListener("scroll", scrollListener, true);
     outsideClickListener = resizeListener = scrollListener = null;
   };
 

package/src/widgets/Image.js

@@ -5,10 +5,17 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 
 export const Image = (props) => {
+  // `fit` and `circular` are documented Image props with no entry in the prop
+  // database, so forwarding them raw only produced an "unknown prop" warning
+  // while images stayed stretched (`object-fit: fill`) and square. Map them onto
+  // real CSS. `...rest` comes last so an explicit `borderRadius` still wins.
+  const { fit, circular, ...rest } = props || {};
   return WidgetFactory({
     tag: "img",
     widgetName: "Image",
-    ...props,
+    ...(fit !== undefined ? { objectFit: fit } : null),
+    ...(circular ? { borderRadius: "50%" } : null),
+    ...rest,
   });
 };
 

package/src/widgets/Input.js

@@ -6,6 +6,7 @@ import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
 import { Icon } from "./Icon.js";
 import { TextInputValidator } from "../utils/TextInputValidator.js";
+import { composeUpdate } from "../utils/composeUpdate.js";
 
 /**
  * @typedef {Object} InputProps
@@ -314,11 +315,16 @@ export const Input = (props) => {
   });
 
   // --- Optional label rendered above the input ---
-  if (label) {
-    const requiredMark = required ? " *" : "";
-    const labelEl = WidgetFactory({
+  let labelEl = null;
+  const renderLabel = (text) => {
+    if (labelEl) {
+      labelEl.textContent = text;
+      return;
+    }
+    if (!text) return;
+    labelEl = WidgetFactory({
       tag: "label",
-      text: label + requiredMark,
+      text,
       fontSize: 12,
       fontWeight: 500,
       color: error ? colors.danger : colors.textSecondary,
@@ -329,8 +335,23 @@ export const Input = (props) => {
     labelEl.addEventListener("click", () => {
       inputElement?.focus();
     });
-    container.appendChild(labelEl);
-  }
+    container.insertBefore(labelEl, container.firstChild);
+  };
+
+  if (label) renderLabel(label + (required ? " *" : ""));
+
+  // `label` is registered as a REACTIVE_PROP that maps to `textContent`, so if the
+  // factory ever sees it, `container.textContent = "…"` replaces this whole
+  // composite widget (label + wrapper + native <input> + icons) with a bare text
+  // node. Own the key and update the label element instead.
+  composeUpdate(container, ["label"], (props) => {
+    if (props.label === undefined) return;
+    renderLabel(props.label ? String(props.label) + (required ? " *" : "") : "");
+    // `makeReactive` writes the value back into `_originalProps` on every setter
+    // call; leaving it there means the next factory update merges it, maps it to
+    // `textContent` and wipes the widget anyway.
+    delete container._originalProps.label;
+  });
 
   // --- Wrapper — contains icons + native input, owns the border/fill style ---
   let wrapperStyles = {

package/src/widgets/Inspector.js

@@ -162,6 +162,16 @@ export const Inspector = (widget, indent = 0) => {
   // Separate structural props from the rest so we can render them last
   const { child, children, ...otherProps } = props;
 
+  // `child` may legitimately be an ARRAY (`child: [Text(...)]`), which the
+  // factory accepts. Normalise it into the children list: otherwise the subtree
+  // is dropped and — because `child` is truthy — the DOM-children fallback below
+  // is skipped too, so the whole branch disappears from the output.
+  const childNode = Array.isArray(child) ? null : child;
+  const kids = [
+    ...(Array.isArray(child) ? child : []),
+    ...(Array.isArray(children) ? children : []),
+  ];
+
   const propsList = Object.entries(otherProps)
     .map(([key, value]) => {
       const formattedValue = stringifyValue(value, indent + 1);
@@ -171,14 +181,14 @@ export const Inspector = (widget, indent = 0) => {
 
   // Reconstruct a single `child` prop
   let childStr = "";
-  if (child && child.nodeType === 1) {
-    childStr = `\n${nextSpaces}child: ${Inspector(child, indent + 1)}`;
+  if (childNode && childNode.nodeType === 1) {
+    childStr = `\n${nextSpaces}child: ${Inspector(childNode, indent + 1)}`;
   }
 
-  // Reconstruct a `children` array prop
+  // Reconstruct a `children` array prop (including an array-valued `child`)
   let childrenStr = "";
-  if (children && Array.isArray(children) && children.length > 0) {
-    const childrenItems = children
+  if (kids.length > 0) {
+    const childrenItems = kids
       .filter((c) => c && c.nodeType === 1)
       .map((c) => Inspector(c, indent + 1))
       .join(",\n" + nextSpaces + "  ");
@@ -191,11 +201,7 @@ export const Inspector = (widget, indent = 0) => {
   // Fall back to actual DOM children when no explicit child/children props exist
   const domChildren = collectChildren(widget);
   let domChildrenStr = "";
-  if (
-    domChildren.length > 0 &&
-    !child &&
-    (!children || children.length === 0)
-  ) {
+  if (domChildren.length > 0 && !childNode && kids.length === 0) {
     const domChildrenItems = domChildren
       .map((c) => Inspector(c, indent + 1))
       .join(",\n" + nextSpaces + "  ");

package/src/widgets/ListView.js

@@ -407,8 +407,14 @@ export const ListView = (props) => {
   const updateData = (newData) => {
     _data = [...newData];
     itemCache.clear();
+    // The dataset changed but the viewport did not, so the previous window
+    // bounds would make `renderVisibleItems()` bail out and leave the OLD rows
+    // on screen for same-length data.
+    visibleStart = -1;
+    visibleEnd = -1;
     refreshUI();
-    element.data = _data;
+    // Do NOT write `element.data` here: `data` is an accessor whose setter calls
+    // this very function, so assigning to it recursed until the stack overflowed.
   };
 
   /**

package/src/widgets/Markdown.js

@@ -5,6 +5,7 @@
  */
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
+import { composeUpdate } from "../utils/composeUpdate.js";
 import { generateHighlightedHtml } from "../utils/syntaxHighlight.js";
 
 /**
@@ -36,19 +37,49 @@ let markdownScopeUid = 0;
  * @param {string} html - Raw HTML produced by `parseMarkdown`.
  * @returns {string} The sanitized HTML.
  */
+/** True for URL values that must never reach an attribute (see sanitizeMarkdown). */
+const isDangerousUrl = (value) => {
+  const v = String(value).replace(/[\u0000-\u0020]/g, "").toLowerCase();
+  if (v.startsWith("javascript:") || v.startsWith("vbscript:")) return true;
+  // Inline images are legitimate; every other `data:` URL is not.
+  return v.startsWith("data:") && !v.startsWith("data:image/");
+};
+
 const sanitizeMarkdown = (html) => {
   const withoutScripts = html.replace(
     /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
     "",
   );
-  return withoutScripts.replace(/<[^<>]+>/g, (tag) =>
-    tag
-      .replace(/\son[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "")
-      .replace(
-        /\s(href|src|xlink:href|formaction|action)\s*=\s*(?:"javascript:[^"]*"|'javascript:[^']*'|javascript:[^\s>]+)/gi,
-        ' $1="#"',
-      ),
-  );
+  // Parse for real and walk the tree. A regex over raw tags cannot see a `>`
+  // that sits *inside* a quoted attribute value, so `<img src="x>y" onerror=…>`
+  // used to pass through untouched while the browser kept the handler. Letting
+  // the browser tokenize removes that entire class of bypass.
+  try {
+    const doc = new DOMParser().parseFromString(withoutScripts, "text/html");
+    doc.querySelectorAll("script").forEach((node) => node.remove());
+    doc.querySelectorAll("*").forEach((node) => {
+      for (const attr of [...node.attributes]) {
+        if (attr.name.toLowerCase().startsWith("on")) {
+          node.removeAttribute(attr.name);
+        } else if (isDangerousUrl(attr.value)) {
+          // Neutralise rather than delete: the documented contract keeps the
+          // attribute and points it at "#", so links stay focusable and styled.
+          node.setAttribute(attr.name, "#");
+        }
+      }
+    });
+    return doc.body.innerHTML;
+  } catch {
+    // No DOMParser (non-browser host): keep the previous best-effort regex pass.
+    return withoutScripts.replace(/<[^<>]+>/g, (tag) =>
+      tag
+        .replace(/\son[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "")
+        .replace(
+          /\s(href|src|xlink:href|formaction|action)\s*=\s*(?:"javascript:[^"]*"|'javascript:[^']*'|javascript:[^\s>]+)/gi,
+          ' $1="#"',
+        ),
+    );
+  }
 };
 
 // ─── Syntax highlighting ────────────────────────────────────────────────────
@@ -1230,6 +1261,20 @@ export const Markdown = (props) => {
    */
   container.getSource = () => markdownText;
 
+  // `text`/`source`/`content` are reactive props mapped to `textContent` in the
+  // prop database, so letting the factory see them replaced the rendered
+  // Markdown with a bare text node. Own them and re-render instead.
+  composeUpdate(container, ["text", "source", "content"], (props) => {
+    const next = props.text ?? props.source ?? props.content;
+    if (next !== undefined) container.updateContent(String(next));
+    // `makeReactive` rewrites the value into `_originalProps` on every setter
+    // call; leaving it there means the next factory update maps it to
+    // `textContent` and wipes the widget anyway.
+    for (const key of ["text", "source", "content"]) {
+      delete container._originalProps[key];
+    }
+  });
+
   return container;
 };
 

package/src/widgets/Modal.js

@@ -312,6 +312,8 @@ export const Modal = (props = {}) => {
 
   let isOpen = false;
   let overlay = null;
+  // Pending "hide after the close animation" timer, so it can be cancelled.
+  let closeTimer = null;
   let modalBody = null;
 
   // Handlers
@@ -323,7 +325,11 @@ export const Modal = (props = {}) => {
       modalBody.style.opacity = "0";
     }
     if (overlay) overlay.style.opacity = "0";
-    setTimeout(() => {
+    // Keep the id: `handleOpen` clears it, otherwise a reopen within 300 ms gets
+    // a stale timer that hides an OPEN modal, leaving it invisible and unusable.
+    if (closeTimer) clearTimeout(closeTimer);
+    closeTimer = setTimeout(() => {
+      closeTimer = null;
       if (overlay) overlay.style.visibility = "hidden";
     }, 300);
     if (closeOnEsc) document.removeEventListener("keydown", handleKeyDown);
@@ -333,6 +339,11 @@ export const Modal = (props = {}) => {
   const handleOpen = () => {
     if (isOpen) return;
     isOpen = true;
+    // Cancel any pending hide from a close that is still animating out.
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+      closeTimer = null;
+    }
     if (overlay) {
       overlay.style.visibility = "visible";
       overlay.style.opacity = "1";
@@ -405,6 +416,18 @@ export const Modal = (props = {}) => {
   overlay.appendChild(modalBody);
   document.body.appendChild(overlay);
 
+  // The overlay lives in `document.body` and can be removed without `close()`
+  // ever running (a state rebuild, a route change, a plain removeChild of the
+  // host). `_cleanup` is not called on that path, so release the document
+  // listener and any pending animation timer through the lifecycle hook too.
+  overlay.onUnmount(() => {
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+      closeTimer = null;
+    }
+    if (closeOnEsc) document.removeEventListener("keydown", handleKeyDown);
+  });
+
   // Public API
   const instance = {
     open: handleOpen,

package/src/widgets/QRCode.js

@@ -116,7 +116,9 @@ function buildQRMatrix(text, ecLevel = "M") {
     for (let i = len - 1; i >= 0; i--) bits.push((val >> i) & 1);
   };
   pushBits(0b0100, 4);           // mode indicator: byte
-  pushBits(bytes.length, 8);    // character count
+  // Character count: 8 bits for versions 1-9, 16 bits for versions 10-40
+  // (ISO/IEC 18004). Emitting 8 bits at version 10 misaligns every later bit.
+  pushBits(bytes.length, version < 10 ? 8 : 16);
   for (const b of bytes) pushBits(b, 8);
   // Terminator
   for (let i = 0; i < 4 && bits.length < dataCodewords * 8; i++) bits.push(0);
@@ -161,7 +163,12 @@ function buildQRMatrix(text, ecLevel = "M") {
 
   // 7. Build final bit sequence
   const finalBits = [];
-  for (const cw of finalCW) pushBits(cw, 8);
+  // NOTE: `pushBits` writes into `bits` (the pre-interleave stream), so it must
+  // not be used here. Using it left `finalBits` empty, and the placement pass
+  // then wrote every data module as 0 — the symbol carried no payload at all.
+  for (const cw of finalCW) {
+    for (let i = 7; i >= 0; i--) finalBits.push((cw >> i) & 1);
+  }
   // Remainder bits (version-dependent, versions 2–6 need 7)
   const remainderBitsCount = version >= 2 && version <= 6 ? 7 : 0;
   for (let i = 0; i < remainderBitsCount; i++) finalBits.push(0);

package/src/widgets/Radio.js

@@ -67,7 +67,7 @@ export const Radio = (props) => {
 
   // Handle click
   if (!disabled) {
-    radio.onclick = (e) => {
+    const handleClick = (e) => {
       e.stopPropagation();
       if (internalSelected) return;
 
@@ -88,6 +88,10 @@ export const Radio = (props) => {
 
       if (onPress) onPress(true);
     };
+    // Routed through the factory props: `assignProps` clears `onclick` on every
+    // update and only re-applies handlers present in the merged props, so a
+    // direct assignment died on the first `update()` or reactive setter.
+    radio.update({ onPress: handleClick });
 
     // Hover effect
     radio.addEventListener("mouseenter", () => {

package/src/widgets/Slider.js

@@ -299,6 +299,9 @@ export const Slider = (props) => {
 
   function generateDefaultMarks() {
     const stepMark = (currentMax - currentMin) / 4;
+    // With `min === max` (or non-numeric bounds) stepMark is 0/NaN, so
+    // `i += stepMark` never advances and the loop hangs the tab forever.
+    if (!(stepMark > 0)) return [currentMin];
     const marksList = [];
     for (let i = currentMin; i <= currentMax + 0.1; i += stepMark) {
       marksList.push(Math.round(i));

package/src/widgets/SnackBar.js

@@ -124,9 +124,18 @@ export function SnackBar(options) {
   });
 
   let timeoutId = null;
+  let rafId = null;
+  // `close()` is final: it must fire `onClose` exactly once and must win any
+  // race against the pending `show()` frame, otherwise closing a toast right
+  // after creating it would flash it back to opacity 1 for a full animation.
+  let closed = false;
 
   const show = () => {
-    requestAnimationFrame(() => {
+    if (closed) return;
+    if (rafId !== null) cancelAnimationFrame(rafId);
+    rafId = requestAnimationFrame(() => {
+      rafId = null;
+      if (closed) return;
       snackbar.style.opacity = "1";
       snackbar.style.transform = "translateY(0)";
     });
@@ -134,7 +143,16 @@ export function SnackBar(options) {
   };
 
   const close = () => {
-    if (timeoutId) clearTimeout(timeoutId);
+    if (closed) return;
+    closed = true;
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
     snackbar.style.opacity = "0";
     snackbar.style.transform =
       position === "bottom"

package/src/widgets/Switch.js

@@ -79,13 +79,17 @@ export const Switch = (props) => {
 
   // Handle click
   if (!disabled) {
-    switchContainer.onclick = (e) => {
+    const handleClick = (e) => {
       e.stopPropagation();
       const newValue = !internalValue;
       internalValue = newValue;
       updateUI(newValue);
       if (onPress) onPress(newValue);
     };
+    // Routed through the factory props: `assignProps` clears `onclick` on every
+    // update and only re-applies handlers present in the merged props, so a
+    // direct assignment died on the first `update()` or reactive setter.
+    switchContainer.update({ onPress: handleClick });
   }
 
   // Public methods

package/src/widgets/TreeView.js

@@ -280,7 +280,9 @@ export const TreeView = (props) => {
 
   // ========== PUBLIC METHODS ==========
 
-  container.updateNodes = (newNodes, selectedId = null) => {
+  // NOTE: no `selectedId = null` default. The guard below tests `!== undefined`,
+  // so a `null` default made it always true and every call wiped the selection.
+  container.updateNodes = (newNodes, selectedId) => {
     nodes.length = 0;
     nodes.push(...newNodes);
     if (selectedId !== undefined) currentSelectedId = selectedId;