fix(jsx/dom): apply select value after children are rendered (#4847)

* fix(jsx/dom): apply select value after children are rendered

When options and value were set simultaneously on a select element,
the value was applied before option children existed in the DOM,
causing selectedIndex to fall back to 0.

Defer select value assignment to after children rendering, similar
to Preact's approach. This ensures options exist in the DOM before
value matching, while other props like `multiple` are still applied
before children.

* fix(jsx/dom): fix select value sync edge cases

For multiple selects with no matching option, selectedIndex was
incorrectly forced to 0. Only reset selectedIndex for single
selects, preserving the browser's default -1 for unmatched
multiple selects.

* perf(jsx/dom): use child.tag instead of el.nodeName for select check

Avoid DOM property access in the hot render loop by checking the
JSX node's tag property directly.

Author: usualoma

src/jsx/dom/index.test.tsx

@@ -904,7 +904,7 @@ describe('DOM', () => {
       it('assign undefined', async () => {
         let setValue: (value: string | undefined) => void = () => {}
         const App = () => {
-          const [value, _setValue] = useState<string | undefined>('a')
+          const [value, _setValue] = useState<string | undefined>('b')
           setValue = _setValue
           return (
             <select value={value}>
@@ -922,6 +922,96 @@ describe('DOM', () => {
         await Promise.resolve()
         const select = root.querySelector('select') as HTMLSelectElement
         expect(select.value).toBe('a') // select the first option
+        expect(select.selectedIndex).toBe(0)
+      })
+
+      it('apply value after options are added', async () => {
+        let setOptions: (options: string[]) => void = () => {}
+        const App = () => {
+          const [options, _setOptions] = useState<string[]>([])
+          setOptions = _setOptions
+          return (
+            <select value='option2'>
+              {options.map((opt) => (
+                <option key={opt} value={opt}>
+                  {opt}
+                </option>
+              ))}
+            </select>
+          )
+        }
+        render(<App />, root)
+        setOptions(['option1', 'option2', 'option3'])
+        await Promise.resolve()
+        const select = root.querySelector('select') as HTMLSelectElement
+        expect(select.value).toBe('option2')
+        expect(select.selectedIndex).toBe(1)
+        expect(select.options[1].selected).toBe(true)
+      })
+
+      it('select the first option when undefined after options are added', async () => {
+        let setOptions: (options: string[]) => void = () => {}
+        const App = () => {
+          const [options, _setOptions] = useState<string[]>([])
+          setOptions = _setOptions
+          return (
+            <select value={undefined}>
+              {options.map((opt) => (
+                <option key={opt} value={opt}>
+                  {opt}
+                </option>
+              ))}
+            </select>
+          )
+        }
+        render(<App />, root)
+        setOptions(['option1', 'option2', 'option3'])
+        await Promise.resolve()
+        const select = root.querySelector('select') as HTMLSelectElement
+        expect(select.value).toBe('option1')
+        expect(select.selectedIndex).toBe(0)
+        expect(select.options[0].selected).toBe(true)
+      })
+
+      it('do not select the first option for invalid multiple value', () => {
+        const App = () => {
+          return (
+            <select multiple value='z'>
+              <option value='a'>A</option>
+              <option value='b'>B</option>
+              <option value='c'>C</option>
+            </select>
+          )
+        }
+        render(<App />, root)
+        const select = root.querySelector('select') as HTMLSelectElement
+        expect(select.value).toBe('')
+        expect(select.selectedIndex).toBe(-1)
+        expect([...select.options].every((option) => !option.selected)).toBe(true)
+      })
+
+      it('keep invalid multiple value unselected after options are added', async () => {
+        let setOptions: (options: string[]) => void = () => {}
+        const App = () => {
+          const [options, _setOptions] = useState<string[]>([])
+          setOptions = _setOptions
+          return (
+            <select multiple value='z'>
+              {options.map((opt) => (
+                <option key={opt} value={opt}>
+                  {opt}
+                </option>
+              ))}
+            </select>
+          )
+        }
+        render(<App />, root)
+        setOptions(['a', 'b', 'c'])
+        await Promise.resolve()
+        const select = root.querySelector('select') as HTMLSelectElement
+        expect(select.value).toBe('')
+        expect(select.selectedIndex).toBe(-1)
+        expect([...select.options].every((option) => !option.selected)).toBe(true)
       })
     })
 

src/jsx/dom/render.ts

@@ -141,6 +141,20 @@ const toAttributeName = (element: SupportedElement, key: string): string =>
     ? key.replace(/([A-Z])/g, '-$1').toLowerCase()
     : key
 
+const normalizeFormValue = (value: Props['value']) =>
+  value === null || value === undefined || value === false ? null : value
+
+const applySelectValue = (select: HTMLSelectElement, props: Props): void => {
+  if (!('value' in props)) {
+    return
+  }
+
+  select.value = normalizeFormValue(props['value'])
+  if (!select.multiple && select.selectedIndex === -1) {
+    select.selectedIndex = 0
+  }
+}
+
 const applyProps = (
   container: SupportedElement,
   attributes: Props,
@@ -188,18 +202,15 @@ const applyProps = (
       } else {
         if (key === 'value') {
           const nodeName = container.nodeName
-          if (nodeName === 'INPUT' || nodeName === 'TEXTAREA' || nodeName === 'SELECT') {
-            ;(container as unknown as HTMLInputElement).value =
-              value === null || value === undefined || value === false ? null : value
+          if (nodeName === 'SELECT') {
+            // Deferred to applySelectValue() after children are rendered
+            continue
+          } else if (nodeName === 'INPUT' || nodeName === 'TEXTAREA') {
+            ;(container as unknown as HTMLInputElement).value = normalizeFormValue(value)
 
             if (nodeName === 'TEXTAREA') {
               container.textContent = value
               continue
-            } else if (nodeName === 'SELECT') {
-              if ((container as unknown as HTMLSelectElement).selectedIndex === -1) {
-                ;(container as unknown as HTMLSelectElement).selectedIndex = 0
-              }
-              continue
             }
           }
         } else if (
@@ -404,8 +415,12 @@ const applyNodeObject = (node: NodeObject, container: Container, isNew: boolean)
         el = child.e ||= child.n
           ? (document.createElementNS(child.n, child.tag as string) as SVGElement | MathMLElement)
           : document.createElement(child.tag as string)
+
         applyProps(el as HTMLElement, child.props, child.pP)
         applyNodeObject(child, el as HTMLElement, isNewLocal)
+        if (child.tag === 'select') {
+          applySelectValue(el as HTMLSelectElement, child.props)
+        }
       }
     }
     if (child.tag === HONO_PORTAL_ELEMENT) {