avoid removing existing dom nodes on subsequent replaceNode calls

preactjs · Jan 22, 2020 · 3a54222 · 3a54222
1 parent a311b04
commit 3a54222
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/src/diff/index.js b/src/diff/index.js
@@ -315,6 +315,7 @@ function diffElementNodes(
 		}
 	} else if (newVNode !== oldVNode) {
 		if (excessDomChildren != null) {
+			excessDomChildren[excessDomChildren.indexOf(dom)] = null;
 			excessDomChildren = EMPTY_ARR.slice.call(dom.childNodes);
 		}
 

diff --git a/test/browser/render.test.js b/test/browser/render.test.js
@@ -1311,6 +1311,29 @@ describe('render()', () => {
 		options._diff = prevDiff;
 	});
 
+	describe('subsequent replaces', () => {
+		it("shouldn't remove elements", () => {
+			const placeholder = document.createElement('div');
+			scratch.appendChild(placeholder);
+			const App = () => (
+				<div>
+					New content
+					<button>Update</button>
+				</div>
+			);
+
+			render(<App />, scratch, placeholder);
+			expect(scratch.innerHTML).to.equal(
+				'<div>New content<button>Update</button></div>'
+			);
+
+			render(<App />, scratch, placeholder);
+			expect(scratch.innerHTML).to.equal(
+				'<div>New content<button>Update</button></div>'
+			);
+		});
+	});
+
 	describe('replaceNode parameter', () => {
 		function appendChildToScratch(id) {
 			const child = document.createElement('div');