From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <yew-devel-bounces@lists.proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9])
	by lore.proxmox.com (Postfix) with ESMTPS id CE4EC1FF15C
	for <inbox@lore.proxmox.com>; Fri,  2 May 2025 15:29:51 +0200 (CEST)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
	by firstgate.proxmox.com (Proxmox) with ESMTP id 9EE023114C;
	Fri,  2 May 2025 15:30:05 +0200 (CEST)
From: Dominik Csapak <d.csapak@proxmox.com>
To: yew-devel@lists.proxmox.com
Date: Fri,  2 May 2025 15:30:02 +0200
Message-Id: <20250502133002.233725-2-d.csapak@proxmox.com>
X-Mailer: git-send-email 2.39.5
In-Reply-To: <20250502133002.233725-1-d.csapak@proxmox.com>
References: <20250502133002.233725-1-d.csapak@proxmox.com>
MIME-Version: 1.0
X-SPAM-LEVEL: Spam detection results:  0
 AWL 0.022 Adjusted score from AWL reputation of From: address
 BAYES_00                 -1.9 Bayes spam probability is 0 to 1%
 DMARC_MISSING             0.1 Missing DMARC policy
 KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
 RCVD_IN_VALIDITY_CERTIFIED_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to
 Validity was blocked. See
 https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more
 information.
 RCVD_IN_VALIDITY_RPBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to
 Validity was blocked. See
 https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more
 information.
 RCVD_IN_VALIDITY_SAFE_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to
 Validity was blocked. See
 https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more
 information.
 SPF_HELO_NONE           0.001 SPF: HELO does not publish an SPF Record
 SPF_PASS               -0.001 SPF: sender matches SPF record
 URIBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to URIBL was blocked. See
 http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block for more
 information. [wizard.rs]
Subject: [yew-devel] [PATCH yew-comp 2/2] wizard: allow enter to be used for
 switching to next page
X-BeenThere: yew-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Yew framework devel list at Proxmox <yew-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/yew-devel>, 
 <mailto:yew-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/yew-devel/>
List-Post: <mailto:yew-devel@lists.proxmox.com>
List-Help: <mailto:yew-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel>, 
 <mailto:yew-devel-request@lists.proxmox.com?subject=subscribe>
Reply-To: Yew framework devel list at Proxmox <yew-devel@lists.proxmox.com>
Content-Type: text/plain; charset="us-ascii"
Content-Transfer-Encoding: 7bit
Errors-To: yew-devel-bounces@lists.proxmox.com
Sender: "yew-devel" <yew-devel-bounces@lists.proxmox.com>

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@proxmox.com>
---
 src/wizard.rs | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/wizard.rs b/src/wizard.rs
index 5f49563..cb7ec9d 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};
@@ -462,7 +462,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();
 
@@ -474,11 +474,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



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