[yew-devel] [PATCH yew-comp v2 2/2] wizard: allow enter to be used for switching to next page

[Dominik Csapak]

by intercepting the `onsubmit` event of the form for each page, which is
triggered when pressing enter in an input field.

For it to work on all forms, we have to inject an invisible input
'submit' element, since pressing enter only submits the form if such an
element is present (or if the form contains a single field; which we
cannot check here).

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
no changes in v2

 src/wizard.rs | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/wizard.rs b/src/wizard.rs
index 5d6eb5e..c7f9ff6 100644
--- a/src/wizard.rs
+++ b/src/wizard.rs
@@ -17,8 +17,8 @@ use pwt::props::{AsCssStylesMut, ContainerBuilder, CssStyles};
 use pwt::state::Selection;
 use pwt::widget::form::{Form, FormContext};
 use pwt::widget::{
-    AlertDialog, Button, Container, Dialog, Mask, MiniScrollMode, Row, TabBarItem, TabBarStyle,
-    TabPanel,
+    AlertDialog, Button, Container, Dialog, Input, Mask, MiniScrollMode, Row, TabBarItem,
+    TabBarStyle, TabPanel,
 };
 
 use yew::html::{IntoEventCallback, IntoPropValue};
@@ -467,7 +467,7 @@ impl Component for PwtWizard {
         let state = self.controller.read();
 
         let mut disabled = false;
-        for (key, page) in props.pages.iter() {
+        for (page_num, (key, page)) in props.pages.iter().enumerate() {
             let active = Some(key) == state.page.as_ref();
             let form_ctx = state.page_data.get(key).unwrap();
 
@@ -479,11 +479,30 @@ impl Component for PwtWizard {
                 controller: self.controller.clone(),
             });
 
+            let next_page = props
+                .pages
+                .get_index(page_num + 1)
+                .map(|(key, _)| key.clone());
+
             let page_content = Form::new()
                 .class(Overflow::Auto)
                 .class(Flex::Fill)
                 .form_context(form_ctx.clone())
-                .with_child(page_content);
+                .onsubmit(ctx.link().batch_callback({
+                    let form_ctx = form_ctx.clone();
+                    move |_| {
+                        if !form_ctx.read().is_valid() {
+                            return None;
+                        }
+                        if let Some(page) = next_page.clone() {
+                            Some(Msg::SelectPage(page, true))
+                        } else {
+                            Some(Msg::Submit)
+                        }
+                    }
+                }))
+                .with_child(page_content)
+                .with_child(Input::new().attribute("type", "submit").class("pwt-d-none"));
 
             let tab_bar_item = page.tab_bar_item.clone().disabled(disabled);
 
-- 
2.39.5