Hydration fails to acknowledge the assigned value on a selection field.

[boymaas]

Problem While experimenting with the Dioxus platform, I have discovered that select boxes and forms do not hydrate well.

After discussing this issue with @ealmloff, a member of the core, we have decided to isolate this case in a minimal app that showcases the problem with option select boxes.

As you can see, when you refresh the page, hydration does not happen correctly based on the server generated value set on the select field.

The expected behavior is to render option2, but it is currently displaying option1 instead, disregarding the assigned value.

Steps To Reproduce

https://github.com/boymaas/dioxus-select-bug

Expected behavior

I expect to see option2 after hydration, is displays the first value option1

Screenshots

Environment: See the github repo

Questionnaire

• [X] I'm interested in fixing this myself but don't know where to start
• [ ] I would like to fix and I have a solution
• [X] I don't have time to fix this right now, but maybe later

[boymaas]

If someone could guide me in the right direction or suggest where to look to solve this hydration issue, I would be willing to give it a try.

[jkelleyrtp]

This is because setting the "value" attribute on select with raw html actually does not set the select value, counterintuitively.

https://stackoverflow.com/questions/3518002/how-can-i-set-the-default-value-for-an-html-select-element

React actually handles this, so we could consider handling it. However, there are workarounds as highlighted in the stackoverflow.

In Solid, this isn't handled.