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 '); + + 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.