[yew-devel] [PATCH yew-widget-toolkit] widget: form: number: set 'inputmode' attribute

[Dominik Csapak]

Even for Number fields, the 'type' attribute is set to 'text' to handle
invalid value/state properly. To help mobile browsers use the correct
software keyboard (e.g. a special one for number input) use the
'inputmode' attribute[0].

For this we have to add an 'is_decimal' function to the NumberTypeInfo
trait, so we can decide if we want to set 'decimal' or 'numeric'.

0: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#inputmode

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 src/widget/form/number.rs | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/widget/form/number.rs b/src/widget/form/number.rs
index d3a5409..c16c099 100644
--- a/src/widget/form/number.rs
+++ b/src/widget/form/number.rs
@@ -39,6 +39,8 @@ pub trait NumberTypeInfo:
     fn step_up(&self, step: Option<Self>) -> Self;
 
     fn clamp_value(&self, min: Option<Self>, max: Option<Self>) -> Self;
+
+    fn is_decimal() -> bool;
 }
 
 impl NumberTypeInfo for f64 {
@@ -72,6 +74,9 @@ impl NumberTypeInfo for f64 {
     fn clamp_value(&self, min: Option<Self>, max: Option<Self>) -> Self {
         self.clamp(min.unwrap_or(f64::MIN), max.unwrap_or(f64::MAX))
     }
+    fn is_decimal() -> bool {
+        true
+    }
 }
 
 // Note: Error message from rust parse() are not gettext translated, so try to do all
@@ -149,6 +154,9 @@ macro_rules! signed_number_impl {
             fn clamp_value(&self, min: Option<Self>, max: Option<Self>) -> Self {
                 (*self).clamp(min.unwrap_or(<$T>::MIN), max.unwrap_or(<$T>::MAX))
             }
+            fn is_decimal() -> bool {
+                false
+            }
         }
     };
 }
@@ -225,6 +233,9 @@ macro_rules! unsigned_number_impl {
             fn clamp_value(&self, min: Option<Self>, max: Option<Self>) -> Self {
                 (*self).clamp(min.unwrap_or(<$T>::MIN), max.unwrap_or(<$T>::MAX))
             }
+            fn is_decimal() -> bool {
+                false
+            }
         }
     };
 }
@@ -625,6 +636,12 @@ impl<T: NumberTypeInfo> ManagedField for NumberField<T> {
             Msg::Update(input.value())
         });
 
+        let inputmode = if T::is_decimal() {
+            "decimal"
+        } else {
+            "numeric"
+        };
+
         let disabled = props.input_props.disabled;
         let input: Html = Input::new()
             .with_input_props(&props.input_props)
@@ -634,6 +651,7 @@ impl<T: NumberTypeInfo> ManagedField for NumberField<T> {
             .attribute("value", value_text)
             .attribute("aria-valuemin", props.min.map(|v| v.to_string()))
             .attribute("aria-valuemax", props.max.map(|v| v.to_string()))
+            .attribute("inputmode", inputmode)
             .oninput(oninput)
             .onkeydown({
                 let link = ctx.link();
-- 
2.47.3