[yew-devel] [PATCH yew-widget-toolkit 1/4] props: field std props: fix typo in description of label_id

[yew-devel] [PATCH yew-widget-toolkit 1/4] props: field std props: fix typo in description of label_id

[Dominik Csapak]

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/props/field_std_props.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/props/field_std_props.rs b/src/props/field_std_props.rs
index 5a4d1fd..38b1b5f 100644
--- a/src/props/field_std_props.rs
+++ b/src/props/field_std_props.rs
@@ -12,7 +12,7 @@ pub struct FieldStdProps {
     #[prop_or_default]
     pub name: Option<AttrValue>,
 
-    /// Html element Id pointing the the field label.
+    /// Html element Id pointing to the field label.
     #[prop_or_default]
     pub label_id: Option<AttrValue>,
 
-- 
2.39.5



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel

[yew-devel] [PATCH yew-widget-toolkit 2/4] props: field builder/std props: add 'id' to the std field props

[Dominik Csapak]

this is so we can add an id to a field where we only have a
`FieldBuilder`, for example in an `InpuPanel`

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/props/field_builder.rs   | 11 +++++++++++
 src/props/field_std_props.rs | 11 +++++++++++
 2 files changed, 22 insertions(+)

diff --git a/src/props/field_builder.rs b/src/props/field_builder.rs
index 38cfb0c..9609596 100644
--- a/src/props/field_builder.rs
+++ b/src/props/field_builder.rs
@@ -100,6 +100,17 @@ pub trait FieldBuilder: Into<VNode> {
         self.as_input_props_mut().label_id = id.into_prop_value();
     }
 
+    /// Builder style method to set the id
+    fn id(mut self, id: impl IntoPropValue<Option<AttrValue>>) -> Self {
+        self.set_id(id);
+        self
+    }
+
+    /// Method to set the id
+    fn set_id(&mut self, id: impl IntoPropValue<Option<AttrValue>>) {
+        self.as_input_props_mut().id = id.into_prop_value();
+    }
+
     /// Builder style method to set the submit flag
     fn submit(mut self, submit: bool) -> Self {
         self.set_submit(submit);
diff --git a/src/props/field_std_props.rs b/src/props/field_std_props.rs
index 38b1b5f..c33ba44 100644
--- a/src/props/field_std_props.rs
+++ b/src/props/field_std_props.rs
@@ -16,6 +16,10 @@ pub struct FieldStdProps {
     #[prop_or_default]
     pub label_id: Option<AttrValue>,
 
+    /// Html element Id for the field.
+    #[prop_or_default]
+    pub id: Option<AttrValue>,
+
     /// Html tabindex attriute
     #[prop_or_default]
     pub tabindex: Option<i32>,
@@ -104,6 +108,13 @@ impl FieldStdProps {
             );
         }
 
+        if let Some(ref id) = self.id {
+            attr_map.insert(
+                AttrValue::Static("id"),
+                (id.clone(), ApplyAttributeAs::Attribute),
+            );
+        }
+
         if let Some(ref tabindex) = self.tabindex {
             attr_map.insert(
                 AttrValue::Static("tabindex"),
-- 
2.39.5



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel

[yew-devel] [PATCH yew-widget-toolkit 3/4] input panel: use the labels tags 'for' property for fields

[Dominik Csapak]

that way we get some nice default browser behavior when clicking on
labels that belong to a field.

When not using the InputPanel, one hast to manually connect the field
and label with their ids.

We want to use prevent_default in the labels onpointerdown event, so we
can prevent the field from losing focus, which would introduce a glitch
for e.g. comoboxes.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/widget/field_label.rs | 4 ++++
 src/widget/input_panel.rs | 9 +++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/widget/field_label.rs b/src/widget/field_label.rs
index e773cc0..164c02f 100644
--- a/src/widget/field_label.rs
+++ b/src/widget/field_label.rs
@@ -34,6 +34,10 @@ impl Component for PwtFieldLabel {
         Container::from_tag("label")
             .with_std_props(&props.std_props)
             .listeners(&props.listeners)
+            .onpointerdown(|event: PointerEvent| {
+                // prevents stealing focus from the input field
+                event.prevent_default();
+            })
             .with_child(props.label.clone())
             .into()
     }
diff --git a/src/widget/input_panel.rs b/src/widget/input_panel.rs
index 06d8c6b..924f82d 100644
--- a/src/widget/input_panel.rs
+++ b/src/widget/input_panel.rs
@@ -216,7 +216,11 @@ impl InputPanel {
         };
 
         let label_id = crate::widget::get_unique_element_id();
-        let mut label: FieldLabel = label.into().id(label_id.clone());
+        let field_id = crate::widget::get_unique_element_id();
+        let mut label: FieldLabel = label
+            .into()
+            .attribute("for", field_id.clone())
+            .id(label_id.clone());
         if label.std_props.key.is_none() {
             label.set_key(format!("label_{}", label.label));
         }
@@ -229,7 +233,8 @@ impl InputPanel {
         self.add_child(label.class(class).attribute("style", style.clone()));
 
         let name = field.as_input_props().name.clone();
-        let field = field.label_id(label_id).into();
+        let field = field.label_id(label_id).id(field_id).into();
+
         let key = match field.key() {
             Some(key) => key.clone(),
             None => match name {
-- 
2.39.5



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel

[yew-devel] [PATCH yew-widget-toolkit 4/4] widget: dropdown: use normal input when using rendered values

[Dominik Csapak]

in case we have a renderer for the value of a dropdown, the original
value should not be shown. Type 'hidden' does the job but has a
drawback, default browser behavior regarding label clicks don't work
with it. So instead use a normal input field but hide it via css.

To get the functionality, we have to pass the whole input_props to the
input, not only a select few (most important is 'id', but simply use
all, so we can't forget one).

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/widget/dropdown.rs | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/widget/dropdown.rs b/src/widget/dropdown.rs
index 4f79187..1e1e6f9 100644
--- a/src/widget/dropdown.rs
+++ b/src/widget/dropdown.rs
@@ -369,12 +369,10 @@ impl Component for PwtDropdown {
                 .with_child(rendered_value)
                 .with_child(
                     Input::new()
-                        .name(props.input_props.name.clone())
-                        .disabled(props.input_props.disabled)
-                        .required(props.input_props.required)
+                        .with_input_props(&props.input_props)
                         .onpointerdown(ctx.link().callback(|_| Msg::MouseDownInput))
                         .attribute("value", value)
-                        .attribute("type", "hidden"),
+                        .class("pwt-d-none"), // hide the real input since we render the value ourselves
                 )
                 .onkeydown(onkeydown)
                 .into()
-- 
2.39.5



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel