fix(runtime-dom): avoid unset option's value

packages/runtime-dom/__tests__/patchProps.spec.ts

@@ -291,6 +291,18 @@ describe('runtime-dom: props patching', () => {
     expect(el.value).toBe('baz')
   })
 
+  test('init empty value for option', () => {
+    const root = document.createElement('div')
+    render(
+      h('select', { value: 'foo' }, [h('option', { value: '' }, 'foo')]),
+      root,
+    )
+    const select = root.children[0] as HTMLSelectElement
+    const option = select.children[0] as HTMLOptionElement
+    expect(select.value).toBe('')
+    expect(option.value).toBe('')
+  })
+
   // #8780
   test('embedded tag with width and height', () => {
     // Width and height of some embedded element such as img、video、source、canvas

packages/runtime-dom/src/modules/props.ts

@@ -34,13 +34,23 @@ export function patchDOMProp(
     // custom elements may use _value internally
     !tag.includes('-')
   ) {
+    const mounted = '_value' in el
     // store value as _value as well since
     // non-string values will be stringified.
     el._value = value
     // #4956: <option> value will fallback to its text content so we need to
     // compare against its attribute value instead.
-    const oldValue =
-      tag === 'OPTION' ? el.getAttribute('value') || '' : el.value
+    let oldValue = el.value
+    if (tag === 'OPTION') {
+      const attrValue = el.getAttribute('value')
+      // #10396
+      // avoid always resetting nullish option value
+      // use '' as oldValue when attrValue is falsy
+      // #10416
+      // but keep as the original attrValue when dom hasn't been mounted
+      // so that el.value can be initialized when option initial value is ''
+      oldValue = mounted ? attrValue || '' : attrValue
+    }
     const newValue = value == null ? '' : value
     if (oldValue !== newValue) {
       el.value = newValue