Fix hydrating textarea with value prop (#3891)

* Fix hydrating textarea with value prop

* Golf setting value

compat/src/render.js

@@ -223,6 +223,25 @@ options._render = function(vnode) {
 	currentComponent = vnode._component;
 };
 
+const oldDiffed = options.diffed;
+/** @type {(vnode: import('./internal').VNode)} */
+options.diffed = function(vnode) {
+	if (oldDiffed) {
+		oldDiffed(vnode);
+	}
+
+	const props = vnode.props;
+	const dom = vnode._dom;
+	if (
+		dom != null &&
+		vnode.type === 'textarea' &&
+		'value' in props &&
+		props.value !== dom.value
+	) {
+		dom.value = props.value == null ? '' : props.value;
+	}
+};
+
 // This is a very very private internal function for React it
 // is used to sort-of do runtime dependency injection. So far
 // only `react-relay` makes use of it. It uses it to read the

compat/test/browser/textarea.test.js

@@ -1,8 +1,10 @@
-import React, { render, useState } from 'preact/compat';
+import React, { render, hydrate, useState } from 'preact/compat';
+import ReactDOMServer from 'preact/compat/server';
 import { setupScratch, teardown } from '../../../test/_util/helpers';
 import { act } from 'preact/test-utils';
 
 describe('Textarea', () => {
+	/** @type {HTMLElement} */
 	let scratch;
 
 	beforeEach(() => {
@@ -19,6 +21,20 @@ describe('Textarea', () => {
 		expect(scratch.firstElementChild.value).to.equal('foo');
 	});
 
+	it('should hydrate textarea value', () => {
+		function App() {
+			return <textarea value="foo" />;
+		}
+
+		scratch.innerHTML = ReactDOMServer.renderToString(<App />);
+		expect(scratch.firstElementChild.value).to.equal('foo');
+		expect(scratch.innerHTML).to.be.equal('<textarea>foo</textarea>');
+
+		hydrate(<App />, scratch);
+		expect(scratch.firstElementChild.value).to.equal('foo');
+		expect(scratch.innerHTML).to.be.equal('<textarea></textarea>');
+	});
+
 	it('should alias defaultValue to children', () => {
 		// TODO: IE11 doesn't update `node.value` when
 		// `node.defaultValue` is set.