solid
solid copied to clipboard
Value of `<select>` is set before the children are created when using spread
Describe the bug
When using spread on a select element the value will be set before the children are created and this will cause the value to be set to an empty string (this is a browser behavior because no option match).
Your Example Website or App
https://playground.solidjs.com/anonymous/d2bf2e03-5e3b-4a9c-a5c0-37a62bbc8f9c
Steps to Reproduce the Bug or Issue
- Open the example
- Look at the result
Expected behavior
The second and third select boxes should have the same option selected.
Screenshots or Videos
No response
Platform
- OS: Windows
- Browser: Edge
- Version: 113
Additional context
No response
Thanks. I see the problem. Right DOM Expression classifies things into few categories:
- declarations:
- declarations, walks
- expressions
- non-reactive expressions
- spreads
- children
- dynamics
- reactive expressions
And get inserted in that order.
Spreads... are clearly in the wrong category. Or rather they straddle both categories. The reason for their location historically was so that refs could be set before children. Moving them to dynamic suggests that even static expressions are dynamic (ie... after children). I think that is fair. Ultimately I wonder if spreads should have 2 phases. Or alternatively refs would always be set at the end. Downside of the latter is no easy pass down. The former seems better but it will take a little bit of work. A quick fix here will break something else. So this will probably need a minor or major release.
Having similar problem when trying to assign the value of each option to a TS enum