Fix nodes with different keys being reused

preactjs · Apr 12, 2019 · 8708c9f · 8708c9f
1 parent 7f368b4
commit 8708c9f
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/src/diff/index.js b/src/diff/index.js
@@ -28,7 +28,7 @@ import options from '../options';
 export function diff(dom, parentDom, newVNode, oldVNode, context, isSvg, excessDomChildren, mounts, ancestorComponent, force, oldDom) {
 
 	// If the previous type doesn't match the new type we drop the whole subtree
-	if (oldVNode==null || newVNode==null || oldVNode.type!==newVNode.type) {
+	if (oldVNode==null || newVNode==null || oldVNode.type!==newVNode.type || oldVNode.key!==newVNode.key) {
 		if (oldVNode!=null) unmount(oldVNode, ancestorComponent);
 		if (newVNode==null) return null;
 		dom = null;

diff --git a/test/browser/keys.test.js b/test/browser/keys.test.js
@@ -298,7 +298,7 @@ describe('keys', () => {
 		]);
 	});
 
-	it.skip('should not preserve state when a component\'s keys are different', () => {
+	it('should not preserve state when a component\'s keys are different', () => {
 		const Stateful = createStateful('Stateful');
 
 		function Foo({ condition }) {
@@ -318,7 +318,7 @@ describe('keys', () => {
 		expect(ops).to.deep.equal(['Unmount Stateful', 'Mount Stateful'], 'switching keys 2');
 	});
 
-	it.skip('should not preserve state between an unkeyed and keyed component', () => {
+	it('should not preserve state between an unkeyed and keyed component', () => {
 		// React and Preact v8 behavior: https://codesandbox.io/s/57prmy5mx
 
 		const Stateful = createStateful('Stateful');