Fix bug causing root element to be deleted during rapid resets.

alexmacarthur · Jul 13, 2022 · eaefade · eaefade
1 parent 0a49a65
commit eaefade
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/packages/typeit/__tests__/helpers/removeNode.test.js b/packages/typeit/__tests__/helpers/removeNode.test.js
@@ -8,18 +8,29 @@ it("removes a node", () => {
   expect(document.body.innerHTML).toEqual("<div>hi.</div>");
 });
 
-it("removes parents if they will be empty", () => {
-  setHTML`<div>hi.<h1><span id="removeMe">bye.</span></h1></div>`;
+describe("parent removal", () => {
+  it("removes parents if they will be empty", () => {
+    setHTML`<div>hi.<h1><span id="removeMe">bye.</span></h1></div>`;
 
-  removeNode(document.getElementById("removeMe"));
+    removeNode(document.getElementById("removeMe"));
 
-  expect(document.body.innerHTML).toEqual("<div>hi.</div>");
-});
+    expect(document.body.innerHTML).toEqual("<div>hi.</div>");
+  });
+
+  it("removes different parent if it will be empty", () => {
+    setHTML`<span>abc<i>hi!</i></span>`;
+
+    removeNode(document.body.querySelector("span").firstChild);
+
+    expect(document.body.innerHTML).toEqual("<span><i>hi!</i></span>");
+  });
 
-it("removes parents if they will be empty", () => {
-  setHTML`<span>abc<i>hi!</i></span>`;
+  it("does not remove root element", () => {
+    setHTML`<h3 id="root"><span><i>hi!</i></span></h3>`;
 
-  removeNode(document.body.querySelector("span").firstChild);
+    const root = document.getElementById("root");
+    removeNode(document.body.querySelector("span").firstChild, root);
 
-  expect(document.body.innerHTML).toEqual("<span><i>hi!</i></span>");
+    expect(document.body.innerHTML).toEqual('<h3 id="root"></h3>');
+  });
 });
diff --git a/packages/typeit/src/helpers/removeNode.ts b/packages/typeit/src/helpers/removeNode.ts
@@ -1,9 +1,11 @@
-export default (node: Node): void => {
+import { El } from "../types";
+
+export default (node: Node, rootElement: El): void => {
   if (!node) return;
 
   let nodeParent = node.parentNode as HTMLElement;
   let nodeToRemove =
-    nodeParent.childNodes.length > 1
+    nodeParent.childNodes.length > 1 || nodeParent.isSameNode(rootElement)
       ? // This parent still needs to exist.
         node
       : // There's nothing else in there, so just delete the entire thing.

diff --git a/packages/typeit/src/index.ts b/packages/typeit/src/index.ts
@@ -79,6 +79,8 @@ const TypeIt: TypeItInstance = function (element, options = {}) {
     });
   };
 
+  let _removeNode = (node) => removeNode(node, _element);
+
   let _elementIsInput = () => isInput(_element);
 
   let _getPace = (index: number = 0): number => calculatePace(_opts)[index];
@@ -375,7 +377,7 @@ const TypeIt: TypeItInstance = function (element, options = {}) {
       return;
     }
 
-    _getAllChars().forEach(removeNode);
+    _getAllChars().forEach(_removeNode);
 
     return;
   };
@@ -388,7 +390,7 @@ const TypeIt: TypeItInstance = function (element, options = {}) {
     if (_elementIsInput()) {
       _element.value = (_element.value as string).slice(0, -1);
     } else {
-      removeNode(allChars[_cursorPosition]);
+      _removeNode(allChars[_cursorPosition]);
     }
   };
 
@@ -557,7 +559,7 @@ const TypeIt: TypeItInstance = function (element, options = {}) {
     _timeouts = destroyTimeouts(_timeouts);
     handleFunctionalArg<boolean>(shouldRemoveCursor) &&
       _cursor &&
-      removeNode(_cursor);
+      _removeNode(_cursor);
     _statuses.destroyed = true;
   };