glen/dyna3
1
0
Fork 0
Code Issues 11 Pull Requests 1 Actions Projects Releases 2 Wiki Activity

Work around data binding bug in number input

Browse Source 
Setting `bind:value` or `bind:valueAsNumber` for a number input seems to
restrict what you can type in it. We work around this by switching to
text inputs for now. We should probably switch back to number inputs if
we can, though, because they let us take advantage of the browser's
parsing and validation.
This commit is contained in:
Aaron Fenyes 2024-10-29 22:53:48 -07:00
parent e0880d2ad2
commit a46ef2c8d6
2 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app-proto/main.css
View File

@ -108,7 +108,7 @@ details[open]:has(li) .elt-switch::after {
margin: 0px 8px 0px 0px; margin: 0px 8px 0px 0px;
} }
.cst > input[type=number] { .cst > input[type=text] {
color: #fcfcfc; color: #fcfcfc;
background-color: inherit; background-color: inherit;
border: 1px solid #555; border: 1px solid #555;

19
app-proto/src/outline.rs
View File

@ -138,22 +138,21 @@ pub fn Outline() -> View {
input(r#type="checkbox", bind:checked=cst.active) input(r#type="checkbox", bind:checked=cst.active)
div(class="cst-label") { (other_arg_label) } div(class="cst-label") { (other_arg_label) }
input( input(
r#type="number", r#type="text",
step="0.01",
bind:value=cst.rep_text, bind:value=cst.rep_text,
on:change=move |event: Event| { on:change=move |event: Event| {
let target: HtmlInputElement = event.target().unwrap().unchecked_into(); let target: HtmlInputElement = event.target().unwrap().unchecked_into();
let rep_valid = target.check_validity() && !target.value().is_empty(); match target.value().parse::<f64>() {
batch(|| { Ok(rep) => batch(|| {
cst.rep_valid.set(rep_valid); cst.rep.set(rep);
if rep_valid { cst.rep_valid.set(true);
console::log_2( console::log_2(
&JsValue::from("Constraint rep parsed to"), &JsValue::from("Constraint rep parsed to"),
&JsValue::from(target.value_as_number()) &JsValue::from(rep)
); );
cst.rep.set(target.value_as_number()); }),
} Err(_) => cst.rep_valid.set(false)
}); };
} }
) )
} }