I was testing the reproduction from solidjs/solid#1754 in the Solid 2 Playground.
import { createSignal } from "solid-js";
import { render } from "@solidjs/web";
function App() {
const [selected] = createSignal("2");
return (
<div>
<select value="2">
<option value="" />
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select value={selected()}>
{(() => (
<>
<option value="" />
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</>
)) as unknown as Element}
</select>
<select {...{}} value={selected()}>
{(() => (
<>
<option value="" />
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</>
)) as unknown as Element}
</select>
</div>
);
}
if (typeof document !== "undefined") {
render(() => <App />, document.getElementById("root")!);
}On Solid 2 RC.4, I get:
value="2" → empty optionvalue={selected()} → 2{...{}} value={selected()} → 2
The static form appears in the generated DOM as:
Browsers do not use a value attribute on <select> to determine its current selection. The reactive forms appear to assign the live select.value property instead.
For comparison, the equivalent Svelte 5 code displays 2, 2, 2:
<script lang="ts">
let selected = $state("2");
</script>
<div>
<select value="2">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select value={selected}>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select {...{}} value={selected}>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>I understand that the first select may originally have been included in #1754 as a raw-browser-behavior baseline. However, in Solid 2, should these equivalent JSX values produce different results?
<select value="2">
<select value={selected()}>Is the static behavior intentional, or should the compiler also assign the value property after creating the options?
The spread-ordering problem from #1754 appears resolved in RC.4, so this seems like a separate static-literal compiler question.
I was testing the reproduction from solidjs/solid#1754 in the Solid 2 Playground.
On Solid 2 RC.4, I get:
value="2"→ empty optionvalue={selected()}→2{...{}} value={selected()}→2The static form appears in the generated DOM as:
Browsers do not use a
valueattribute on<select>to determine its current selection. The reactive forms appear to assign the liveselect.valueproperty instead.For comparison, the equivalent Svelte 5 code displays
2,2,2:I understand that the first select may originally have been included in #1754 as a raw-browser-behavior baseline. However, in Solid 2, should these equivalent JSX values produce different results?
Is the static behavior intentional, or should the compiler also assign the
valueproperty after creating the options?The spread-ordering problem from #1754 appears resolved in RC.4, so this seems like a separate static-literal compiler question.