Select not updating on load with `selected` changing

[kalebvonburris]

Problem

When loading data into an application, you set what <option> a <select> is using with the selected=true flag. In Dioxus, doing this results in the selected <option> always displaying the first value available regardless of the selected value.

Steps To Reproduce

Steps to reproduce the behavior:

• Create a select element
• Create 2 option elements within
• Set the latter of two options to have selected: true

Expected behavior

Screenshots

Environment:

• Dioxus version: 0.5.1
• Rust version: 1.79.0
• OS info: Arch
• App platform: web and desktop

Questionnaire

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

[ealmloff]

I cannot reproduce the issue with this setup:

#![allow(non_snake_case)]
use dioxus::prelude::*;

fn main() {
    launch(|| {
        let mut value = use_signal(|| "volvo".to_string());
        rsx! {
            select {
                id: "cars",
                oninput: move |evt| {
                    value.set(evt.value());
                },
                option {
                    value: "volvo",
                    selected: &*value.read() == "volvo",
                    "Volvo"
                }
                option {
                    value: "saab",
                    selected: &*value.read() == "saab",
                    "Saab"
                }
                option {
                    value: "opel",
                    selected: &*value.read() == "opel",
                    "Opel"
                }
                option {
                    value: "audi",
                    selected: &*value.read() == "audi",
                    "Audi"
                }
            }
            "{value}"
        }
    });
}

[dependencies]
dioxus = { version = "0.5.1", features = ["web"] }

A similar setup with numbers for values also works:

#![allow(non_snake_case)]
use dioxus::prelude::*;

fn main() {
    launch(|| {
        let mut value = use_signal(|| 0);
        rsx! {
            select {
                id: "cars",
                oninput: move |evt| {
                    value.set(evt.value().parse::<usize>().unwrap());
                },
                option {
                    value: 0,
                    selected: value() == 0,
                    "Volvo"
                }
                option {
                    value: 1,
                    selected: value() == 1,
                    "Saab"
                }
                option {
                    value: 2,
                    selected: value() == 2,
                    "Opel"
                }
                option {
                    value: 3,
                    selected: value() == 3,
                    "Audi"
                }
            }
            "{value}"
        }
    });
}

[kalebvonburris]

Try setting the initial value to something that isn't the first option.

[ealmloff]

This also works with the initial value set to the second option:

#![allow(non_snake_case)]
use dioxus::prelude::*;

fn main() {
    launch(|| {
        let mut value = use_signal(|| 1);

        rsx! {
            select {
                id: "cars",
                oninput: move |evt| {
                    value.set(evt.value().parse::<usize>().unwrap());
                },
                option {
                    value: 0,
                    selected: value() == 0,
                    "Volvo"
                }
                option {
                    value: 1,
                    selected: value() == 1,
                    "Saab"
                }
                option {
                    value: 2,
                    selected: value() == 2,
                    "Opel"
                }
                option {
                    value: 3,
                    selected: value() == 3,
                    "Audi"
                }
            }
            "{value}"
        }
    });
}