Select options behaving differently in Vue 3 than Vue 2
Version
3.0.7
Reproduction link
Vue 3: https://codesandbox.io/s/distracted-ritchie-kdcwo?file=/src/App.vue
Vue 2: https://codesandbox.io/s/focused-glade-qj11z?file=/src/App.vue
Steps to reproduce
Click the submit button in both sandboxes
What is expected?
The <option> with value null shouldn't be rendered as a string in Vue 3.
What is actually happening?
When you add a couple of <option>, eventually an <option> with value null will be rendered as a it has a string value of null.
<!-- Vue 2 -->
<select name="large">
<option value="">Not set</option>
...
</select>
<!-- Vue 3 -->
<select name="large">
<option value="null">Not set</option>
...
</select>
As we can see if you have more than 4 <option>s, Vue's compiler will try to stringify static nodes for performance reasons. So when you have 5 <option>s, the first <option> is stringified into "<option value=\"null\">Not set</option>" so we are experiencing the current issue.
There seems to be another bug that <option :value="null"> is rendered as <option value> when not taking the optimization path as for Vue 3 we have taken a new strategy for attribute coercion and the expected output should be <option> as null values for an attribute now indicates the attribute should be removed.
Though #3477 may fix that null values were rendered as "null", the difference between Vue 2 and 3 still exists and is intentional.
And there's still an issue to be investigated that <option :value="null"> is rendered as <option value="">, which does not comply with our latest coercion behavior.