fix(runtime-dom): ensure value is explicitly set on OPTION elements

even when they have a matching textContent close #4956
vuejs · Nov 17, 2021 · 55e8c54 · 55e8c54
1 parent 1149e82
commit 55e8c54
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts
@@ -29,9 +29,12 @@ describe('runtime-dom: props patching', () => {
   // so we need to add tests for other elements
   test('value for non-text input', () => {
     const el = document.createElement('option')
+    el.textContent = 'foo' // #4956
     patchProp(el, 'value', null, 'foo')
+    expect(el.getAttribute('value')).toBe('foo')
     expect(el.value).toBe('foo')
     patchProp(el, 'value', null, null)
+    el.textContent = ''
     expect(el.value).toBe('')
     // #3475
     expect(el.getAttribute('value')).toBe(null)

diff --git a/packages/runtime-dom/src/modules/props.ts b/packages/runtime-dom/src/modules/props.ts
@@ -31,7 +31,12 @@ export function patchDOMProp(
     // non-string values will be stringified.
     el._value = value
     const newValue = value == null ? '' : value
-    if (el.value !== newValue) {
+    if (
+      el.value !== newValue ||
+      // #4956: for OPTION elements, we need to check for the value attribute because
+      // el.value returns el.textContent if attribute is absent (i.e. hasn't been set yet)
+      (el.tagName === 'OPTION' && el.getAttribute('value') !== newValue)
+    ) {
       el.value = newValue
     }
     if (value == null) {