respect default value (#4341)

* respect default value

* Update src/diff/index.js

* Update test/browser/render.test.js

* comments

* add test

* add checked

* feedback

src/diff/index.js

@@ -443,6 +443,12 @@ function diffElementNodes(
 			} else if (i == 'dangerouslySetInnerHTML') {
 				oldHtml = value;
 			} else if (i !== 'key' && !(i in newProps)) {
+				if (
+					(i == 'value' && 'defaultValue' in newProps) ||
+					(i == 'checked' && 'defaultChecked' in newProps)
+				) {
+					continue;
+				}
 				setProperty(dom, i, null, value, isSvg);
 			}
 		}

test/browser/hydrate.test.js

@@ -57,6 +57,19 @@ describe('hydrate()', () => {
 		teardown(scratch);
 	});
 
+	// Test for preactjs/preact#4340
+	it('should respect defaultValue in hydrate', () => {
+		scratch.innerHTML = '<input value="foo">';
+		hydrate(<input defaultValue="foo" />, scratch);
+		expect(scratch.firstChild.value).to.equal('foo');
+	});
+
+	it('should respect defaultChecked in hydrate', () => {
+		scratch.innerHTML = '<input checked="true">';
+		hydrate(<input defaultChecked />, scratch);
+		expect(scratch.firstChild.checked).to.equal(true);
+	});
+
 	it('should reuse existing DOM', () => {
 		const onClickSpy = sinon.spy();
 		const html = ul([li('1'), li('2'), li('3')]);

test/browser/render.test.js

@@ -472,6 +472,35 @@ describe('render()', () => {
 		expect(scratch.firstChild.spellcheck).to.equal(false);
 	});
 
+	// Test for preactjs/preact#4340
+	it('should respect defaultValue in render', () => {
+		scratch.innerHTML = '<input value="foo">';
+		render(<input defaultValue="foo" />, scratch);
+		expect(scratch.firstChild.value).to.equal('foo');
+	});
+
+	it('should support subsequent renders w/ defaultValue', () => {
+		scratch.innerHTML = '<input value="foo">';
+		render(<input defaultValue="foo" value="bar" />, scratch);
+		expect(scratch.firstChild.value).to.equal('bar');
+		render(<input defaultValue="foo" value="baz" />, scratch);
+		expect(scratch.firstChild.value).to.equal('baz');
+	});
+
+	it('should respect defaultChecked in render', () => {
+		scratch.innerHTML = '<input checked="true">';
+		render(<input defaultChecked />, scratch);
+		expect(scratch.firstChild.checked).to.equal(true);
+	});
+
+	it('should support subsequent renders w/ defaultChecked', () => {
+		scratch.innerHTML = '<input checked="true">';
+		render(<input defaultChecked checked />, scratch);
+		expect(scratch.firstChild.checked).to.equal(true);
+		render(<input defaultChecked checked={false} />, scratch);
+		expect(scratch.firstChild.checked).to.equal(false);
+	});
+
 	it('should render download attribute', () => {
 		render(<a download="" />, scratch);
 		expect(scratch.firstChild.getAttribute('download')).to.equal('');