DioxusLabs / DioxusLabs/dioxus

Initial select value ignored

Open
#5,238 7 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
Rust
Stars
39.1k
Forks
1.9k
Avg merge
4d 10h
Merged PRs (30d)
4

Description

First of all, I am not sure if this is a bug or if I've just misunderstood something and I was unable to find another issue for this problem (but there are a lot of them so it might just be that I don't know what to search for), if so I apologize.

**Problem**

I have a situation where I have components that I thought would be completely reactive fail to be accurately synchronized. With a select showing the "default" value despite having another (existing) value that should be displayed.

**Steps To Reproduce**

Steps to reproduce the behavior:
I wrote a small MRE to show the problem:

```rust
#[component]
fn Outer() -> Element {
let mut selected_value = use_signal(|| "".to_string());
let mut decided_value = use_signal(|| None);

rsx! {
div {
if decided_value().is_none() {
TSelect {
value: selected_value,
oninput: move |e: FormEvent| selected_value.set(e.value()),
option { value: "a", "A" }
option { value: "b", "B" }
}
} else {
"{selected_value()}"
}
Button {
disabled: selected_value().eq(""),
onclick: move |_| decided_value.set(Some(selected_value())),
"Select"
}
Button { onclick: move |_| decided_value.set(None), "Reset" }
}
}
}

#[derive(PartialEq, Debug, Clone, Props)]
pub struct TSelectProps {
value: ReadSignal,

#[props(default)]
oninput: EventHandler,

children: Element,
}

#[component]
fn TSelect(
TSelectProps {
value,
oninput,
children,
}: TSelectProps,
) -> Element {
rsx! {
select { value: "{value()}", oninput,
option { value: "", "--Select an option--" }
{children}
}
}
}
```

- I select a value in the select (let's say "A")
- This makes the "Select" button no longer disabled and thus I can click it (which I do)
- This replaces the select with the text "a" as per the value of that option.
- When I then click the "Reset" button, the dropdown comes back but shows the default "--Select an option--" value, however, the "Select" button is not disabled.
- If I once again press the "Select" button the dropdown is replaced with the text "a" again.

Through logging & otherwise debugging I've found that the value of the signal `selected_value` is still "a" (which makes sense since I haven't changed it). This also goes for the `value` prop on the `TSelect` component, however, the `select` tag doesn't reflect this value visually.

**Expected behavior**
When I click the "Reset" button the dropdown to have the actual value of the `selected_value` signal (i.e. "a" in this case or "A" visually).

**Screenshots**

Initial state
Image
After I select "A"
Image
After pressing "Reset"
Image

**Environment:**

- Dioxus version: 0.7.2
- Rust version: 1.93.0-nightly
- OS info: Archlinux
- App platform: Web

**Questionnaire**

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.