diff --git a/compat/src/render.js b/compat/src/render.js index ff35a5b94a..2448d2d34d 100644 --- a/compat/src/render.js +++ b/compat/src/render.js @@ -117,7 +117,15 @@ options.vnode = vnode => { for (let i in props) { let value = props[i]; - if (i === 'defaultValue' && 'value' in props && props.value == null) { + if (i === 'value' && 'defaultValue' in props && value == null) { + // Skip applying value if it is null/undefined and we already set + // a default value + continue; + } else if ( + i === 'defaultValue' && + 'value' in props && + props.value == null + ) { // `defaultValue` is treated as a fallback `value` when a value prop is present but null/undefined. // `defaultValue` for Elements with no value prop is the same as the DOM defaultValue property. i = 'value'; diff --git a/compat/test/browser/render.test.js b/compat/test/browser/render.test.js index bbc1dca373..5d9ff5c70a 100644 --- a/compat/test/browser/render.test.js +++ b/compat/test/browser/render.test.js @@ -110,6 +110,14 @@ describe('compat render', () => { expect(scratch.firstElementChild).to.have.property('value', 'foo'); }); + it('should add defaultValue when value is null/undefined', () => { + render(, scratch); + expect(scratch.firstElementChild).to.have.property('value', 'foo'); + + render(, scratch); + expect(scratch.firstElementChild).to.have.property('value', 'foo'); + }); + it('should support defaultValue for select tag', () => { function App() { return (