[PATCH yew-widget-toolkit 0/2] widget: form: number: fix float display and focus

[PATCH yew-widget-toolkit 0/2] widget: form: number: fix float display and focus

[Christoph Heiss]

Both patches are independent and can be applied separately, if wanted.

Patch #1 fixes the formatting for the `Number` widget with floating
point numbers, when using the step buttons.

Patch #2 fixes focusing the input by click, which currently is
intercepted too early and thus broken.

Christoph Heiss (2):
  widget: form: number: round floats to nearest step value
  widget: form: number: allow focusing the input on mouse click

 src/widget/form/number.rs | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

-- 
2.53.0

[RFC PATCH yew-widget-toolkit 1/2] widget: form: number: round floats to nearest step value

[Christoph Heiss]

E.g. previously, for an input like

    Number::new()
        .name("some-float")
        .min(0.)
        .step(0.1)
        .submit_empty(false)
        .value(0.2)

and pressing the "range-up" button on the input would result in
0.30000000000000004 - which is rather undesirable.

Fix it by multiplying, rounding and then dividing the number again by
some fixed multiplier - in this case, 100_000 was chosen. Should cover
all realistic cases, as it handles up to five fractional digits, which
for UI purposes should (hopefully!) be plenty enough. And if really
needed, could be increased.

Signed-off-by: Christoph Heiss <c.heiss@proxmox.com>
---
Marked RFC as it may not be necessarily the *best* solution, but by far
the *simplest*. Happy about other solution suggestions, of course.

I also considered other solutions like e.g. doing the rounding
(implicitly) when formatting the number as string above with
`dom::format_float()` - but that solution seemed more like papering over
the symptoms than fixing the root cause.

 src/widget/form/number.rs | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/widget/form/number.rs b/src/widget/form/number.rs
index e5c849c..6db7063 100644
--- a/src/widget/form/number.rs
+++ b/src/widget/form/number.rs
@@ -68,10 +68,14 @@ impl NumberTypeInfo for f64 {
         crate::dom::format_float(*self)
     }
     fn step_up(&self, step: Option<Self>) -> Self {
-        self + step.unwrap_or(1.0)
+        // Do a little dance here to round to the nearest step value, by multiplying,
+        // rounding to the nearest integer and dividing again
+        ((self + step.unwrap_or(1.0)) * 1e5).round() / 1e5
     }
     fn step_down(&self, step: Option<Self>) -> Self {
-        self - step.unwrap_or(1.0)
+        // Do a little dance here to round to the nearest step value, by multiplying,
+        // rounding to the nearest integer and dividing again
+        ((self - step.unwrap_or(1.0)) * 1e5).round() / 1e5
     }
     fn clamp_value(&self, min: Option<Self>, max: Option<Self>) -> Self {
         self.clamp(min.unwrap_or(f64::MIN), max.unwrap_or(f64::MAX))
-- 
2.53.0

[PATCH yew-widget-toolkit 2/2] widget: form: number: allow focusing the input on click

[Christoph Heiss]

The `.prevent_default()` on the input elements `onmousedown` handler is
not needed and actually prevents the input from being focused by
clicking, since the event will never reach it. Drop it.

The returned `SpinnerStop` value is just a dummy, so safe to remove the
entire handler.

Signed-off-by: Christoph Heiss <c.heiss@proxmox.com>
---
 src/widget/form/number.rs | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/widget/form/number.rs b/src/widget/form/number.rs
index 6db7063..82d66b4 100644
--- a/src/widget/form/number.rs
+++ b/src/widget/form/number.rs
@@ -665,12 +665,6 @@ impl<T: NumberTypeInfo> ManagedField for NumberField<T> {
             }
         });
 
-        let on_mouse_down = ctx.link().callback(|event: MouseEvent| {
-            // prevent focus loss
-            event.prevent_default();
-            Msg::SpinnerStop // dummy
-        });
-
         let input_props = props.input_props.clone();
 
         let inputmode = if T::is_decimal() {
@@ -702,7 +696,6 @@ impl<T: NumberTypeInfo> ManagedField for NumberField<T> {
                     event.prevent_default();
                 }
             })
-            .onmousedown(on_mouse_down)
             .into_html_with_ref(self.input_ref.clone());
 
         let mut input_container = Tooltip::empty()
-- 
2.53.0