fix(clone-element): preserve falsy key and ref values in cloneElement (#5082)

* fix(clone-element): preserve falsy key and ref values in cloneElement

* fix(clone-element): use UNDEFINED constant and add import

* test(clone-element): add tests for falsy key and ref values

Author: Olexandr88

src/clone-element.js

@@ -1,6 +1,6 @@
 import { assign, slice } from './util';
 import { createVNode } from './create-element';
-import { NULL } from './constants';
+import { NULL, UNDEFINED } from './constants';
 
 /**
  * Clones the given VNode, optionally adding attributes/props and replacing its
@@ -31,8 +31,8 @@ export function cloneElement(vnode, props, children) {
 	return createVNode(
 		vnode.type,
 		normalizedProps,
-		key || vnode.key,
-		ref || vnode.ref,
+		key !== UNDEFINED ? key : vnode.key,
+		ref !== UNDEFINED ? ref : vnode.ref,
 		NULL
 	);
 }

test/browser/cloneElement.test.jsx

@@ -81,4 +81,23 @@ describe('cloneElement', () => {
 		const clone = cloneElement(div, { key: 'myKey' });
 		expect(clone.props.key).to.equal(undefined);
 	});
+
+	it('should preserve falsy key values', () => {
+		function Foo() {}
+		const instance = <Foo key="original">hello</Foo>;
+
+		let clone = cloneElement(instance, { key: 0 });
+		expect(clone.key).to.equal(0);
+
+		clone = cloneElement(instance, { key: '' });
+		expect(clone.key).to.equal('');
+	});
+
+	it('should preserve falsy ref values', () => {
+		function a() {}
+		const instance = <div ref={a}>hello</div>;
+
+		const clone = cloneElement(instance, { ref: null });
+		expect(clone.ref).to.equal(null);
+	});
 });