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 (