diff --git a/compat/src/render.js b/compat/src/render.js
index 5e923667fd..2e54fcba85 100644
--- a/compat/src/render.js
+++ b/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
diff --git a/compat/test/browser/textarea.test.js b/compat/test/browser/textarea.test.js
index d1c114ec7d..9162a440a3 100644
--- a/compat/test/browser/textarea.test.js
+++ b/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 ;
+ }
+
+ scratch.innerHTML = ReactDOMServer.renderToString();
+ expect(scratch.firstElementChild.value).to.equal('foo');
+ expect(scratch.innerHTML).to.be.equal('');
+
+ hydrate(, scratch);
+ expect(scratch.firstElementChild.value).to.equal('foo');
+ expect(scratch.innerHTML).to.be.equal('');
+ });
+
it('should alias defaultValue to children', () => {
// TODO: IE11 doesn't update `node.value` when
// `node.defaultValue` is set.