HTML <select> control not displaying default value

[gramie]

I have been having trouble getting a <select> box to display with an initial value. When I look at the example at https://vanjs.org/tutorial#state-derived-prop, I see it also does not display the correct initial value. If you change line #4 of the example:

const size = van.state(16), color = van.state("black")

to use a different colour (i.e. green):

const size = van.state(16), color = van.state("green")

then the text

Hello 🍦VanJS

is correctly green, but the <select> box displays "black". There is no way (as far as I have found) of having the <select> display "green" if that is the initial state of the variable "color".

[sirenkovladd]

The same issue discussed here #346

Unfortunately, this is a problem in HTML itself

[Tao-VanJS]

Thanks @gramie so much for the catch!

I fixed the issue in vanjs-org/vanjs-org.github.io@498fcfd by using selected property of the <option> element instead. Apparently the value property of the <select> element doesn't work, due to some oddness of HTML.

[sirenkovladd]

The problem with this approach is that when the value changes, the result of this function will be calculated N times
which can cause some performance slowdowns

[tao-corp]

Yeah. That's the tradeoff.

[gramie]

@Tao-VanJS, @sirenkovladd Thanks very much for your help. Glad to know that it's not just me!

Another workaround I have found is to go back and set the value of the select to something else (e.g. "null") and then set it back to the default value. This forces any calculations to be done twice (not a problem in my application) but does have the desired effect.

const choice = van.state(5);

van.add($('#select'),
select({ value: choice },
['1', '2', '3', '4', '5'].map((x) => option({ value: x, selected: () => choice.val === x}, x)), ) );
choice.val = 4;
choice.val = 3;