From c8c18d838573859b61c47875a4320b9ad0ad7514 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sat, 5 Sep 2026 19:46:48 -0700 Subject: morph: leave
to the user; key the names settings sections Every background repaint stripped the browser-set `open` attribute (the fresh render never carries it), collapsing expanded sections, and the positional child match handed one section's open state to its neighbour whenever the conditional zap-code section came or went. `open` on a details is now user-owned unless a render sets it, and nodes carrying data-key only patch into the same key. Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01VMi2Y1oKPZ3TeeFmLej47y --- src/app.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) (limited to 'src/app.js') diff --git a/src/app.js b/src/app.js index 5013058..e8a308d 100644 --- a/src/app.js +++ b/src/app.js @@ -180,8 +180,20 @@ function morph(a, b) { // would visibly crossfade the old style into the new one (a dark filled // button melting into a text link read as a black flash). Repaints aren't // style animations: snap it, restore the transition after the paint. + // A node with a data-key is only ever patched into a node with the SAME + // key: siblings line up by position, so a conditional sibling appearing or + // vanishing would otherwise hand one section's live state (an expanded + //
) to its neighbour. + if (a.getAttribute('data-key') !== b.getAttribute('data-key')) { + a.replaceWith(b); + return; + } const snap = a.nodeName === 'BUTTON' && a.getAttribute('class') !== b.getAttribute('class'); - for (const at of [...a.attributes]) if (!b.hasAttribute(at.name)) a.removeAttribute(at.name); + //
is the user's doing (the browser toggles the attribute on + // click), like a field's value: a render that doesn't set `open` leaves it + // alone instead of collapsing the section on every background repaint. + const userOwned = (at) => a.nodeName === 'DETAILS' && at.name === 'open'; + for (const at of [...a.attributes]) if (!b.hasAttribute(at.name) && !userOwned(at)) a.removeAttribute(at.name); for (const at of [...b.attributes]) if (a.getAttribute(at.name) !== at.value) a.setAttribute(at.name, at.value); if (snap) { a.style.transition = 'none'; -- cgit v1.2.3