Merge f2b8600 into 9e3faa9

preactjs · Jan 22, 2020 · b561314 · b561314
2 parents 9e3faa9 + f2b8600
commit b561314
Show file tree

Hide file tree

Showing 2 changed files with 50 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,55 @@ 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>'
+			);
+		});
+
+		it('should remove redundant 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>'
+			);
+
+			placeholder.appendChild(document.createElement('span'));
+			expect(scratch.innerHTML).to.equal(
+				'<div>New content<button>Update</button><span></span></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');