x-bind:selected does not work with strict comparison after init.

[ggedde]

Since the Select x-model with a <template x-for...> with options, doesn't bind the initial x-model value to the options on initial load (#1255, #4140), you need to use another approach like

x-bind:selected="option == myModelVar"

However this doesn't work well with strict comparison when the value is a non string

x-bind:selected="option === myModelVar"

When changing the select it always reverts back to the first option as the comparison breaks.
However, it does load the value correctly on initial load, but just not after you change the value and if you remove the x-bind:selected, then it works correctly when changing the value, but doesn't load the value correctly on initial load.

Luckily, you can just revert back to non strict comparison "==", but as a strong strict type developer I find that hard to remember to do. You can also force to string with:

x-bind:selected="option.toString() === myModelVar.toString()"

Since there is a workaround, it may not need resolving, but I do think it should be updated to allow for strict comparison to save developers from headaches like I ran into :), but I also wanted this to be documented.

I have only tested this with x-bind:selected, but it may be the same with other x-bind directives.

Examples:
https://codepen.io/ggedde/pen/myVeMxP

Thanks,

[ekwoka]

Well, that would make sense, if your values are not strings. You should use string values or use x-model.number

That's the issue here.