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

[Dominik Csapak <d.csapak@proxmox.com>]

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