bugfix: element with an IDed child might not have its removal hook ca…

…lled if the child is moved elsewhere.

src/idiomorph.js

@@ -535,10 +535,33 @@ var Idiomorph = (function () {
           ctx.target.querySelector(`#${id}`) ||
             ctx.pantry.querySelector(`#${id}`)
         );
+      removeElementFromAncestorsIdMaps(target, ctx);
       moveBefore(parentNode, target, after);
       return target;
     }
 
+    /**
+     * Removes an element from its ancestors' id maps. This is needed when an element is moved from the
+     * "future" via `moveBeforeId`. Otherwise, its erstwhile ancestors could be mistakenly moved to the
+     * pantry rather than being deleted, preventing their removal hooks from being called.
+     *
+     * @param {Element} element - element to remove from its ancestors' id maps
+     * @param {MorphContext} ctx
+     */
+    function removeElementFromAncestorsIdMaps(element, ctx) {
+      const id = element.id;
+      /** @ts-ignore - safe to loop in this way **/
+      while ((element = element.parentNode)) {
+        let idSet = ctx.idMap.get(element);
+        if (idSet) {
+          idSet.delete(id);
+          if (!idSet.size) {
+            ctx.idMap.delete(element);
+          }
+        }
+      }
+    }
+
     /**
      * Moves an element before another element within the same parent.
      * Uses the proposed `moveBefore` API if available (and working), otherwise falls back to `insertBefore`.

test/hooks.js

@@ -121,6 +121,24 @@ describe("lifecycle hooks", function () {
     initial.outerHTML.should.equal("<ul><li>A</li><li>B</li></ul>");
   });
 
+  it("returning false to beforeNodeRemoved prevents removing the node when an IDed child is moved elsewhere", function () {
+    let initial = make(
+      `<ul><li><a id="a">A</a></li><li><b id="b">B</b></li></ul>`,
+    );
+    Idiomorph.morph(
+      initial,
+      `<ul><li><a id="a">A</a><b id="b">B</b></li></ul>`,
+      {
+        callbacks: {
+          beforeNodeRemoved: (node) => false,
+        },
+      },
+    );
+    initial.outerHTML.should.equal(
+      `<ul><li><a id="a">A</a><b id="b">B</b></li><li></li></ul>`,
+    );
+  });
+
   it("returning false to beforeNodeRemoved prevents removing the node with different tag types", function () {
     let initial = make("<div><a>A</a><b>B</b><c>C</c></div>");
     Idiomorph.morph(initial, "<div><b>B</b></div>", {