From a46ef2c8d63eaca964fceea6c1bf547a89944261 Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Tue, 29 Oct 2024 22:53:48 -0700 Subject: [PATCH] Work around data binding bug in number input 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. --- app-proto/main.css | 2 +- app-proto/src/outline.rs | 19 +++++++++---------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/app-proto/main.css b/app-proto/main.css index 44dc7a1..32ae5bf 100644 --- a/app-proto/main.css +++ b/app-proto/main.css @@ -108,7 +108,7 @@ details[open]:has(li) .elt-switch::after { margin: 0px 8px 0px 0px; } -.cst > input[type=number] { +.cst > input[type=text] { color: #fcfcfc; background-color: inherit; border: 1px solid #555; diff --git a/app-proto/src/outline.rs b/app-proto/src/outline.rs index d6b0390..62bc529 100644 --- a/app-proto/src/outline.rs +++ b/app-proto/src/outline.rs @@ -138,22 +138,21 @@ pub fn Outline() -> View { input(r#type="checkbox", bind:checked=cst.active) div(class="cst-label") { (other_arg_label) } input( - r#type="number", - step="0.01", + r#type="text", bind:value=cst.rep_text, on:change=move |event: Event| { let target: HtmlInputElement = event.target().unwrap().unchecked_into(); - let rep_valid = target.check_validity() && !target.value().is_empty(); - batch(|| { - cst.rep_valid.set(rep_valid); - if rep_valid { + match target.value().parse::() { + Ok(rep) => batch(|| { + cst.rep.set(rep); + cst.rep_valid.set(true); console::log_2( &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) + }; } ) }