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 [212.224.123.68])
by lore.proxmox.com (Postfix) with ESMTPS id 5D7C81FF162
for <inbox@lore.proxmox.com>; Mon, 5 May 2025 11:17:56 +0200 (CEST)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id 6B48BFBBE;
Mon, 5 May 2025 11:18:12 +0200 (CEST)
From: Dominik Csapak <d.csapak@proxmox.com>
To: yew-devel@lists.proxmox.com
Date: Mon, 5 May 2025 11:18:08 +0200
Message-Id: <20250505091808.1168714-1-d.csapak@proxmox.com>
X-Mailer: git-send-email 2.39.5
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
SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record
SPF_PASS -0.001 SPF: sender matches SPF record
Subject: [yew-devel] [PATCH yew-widget-toolkit v2] dialog: put all dialogs
into a portal
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>
otherwise, the dialog is part of the markup where we insert it, which
can make problems with event handling, for example:
Creating a form that can open a dialog which contains also a form,
produces two problems:
* nesting forms is explicitly not allowed [0]
* if the form has a 'submit' input, pressing 'enter' in either form
will submit the upper one.
To fix such issues in general, put the dialog into portal, which
put it directly into the body, where it can't interfere with other
elements up the tree. The yew component tree is not affected.
0: https://html.spec.whatwg.org/multipage/forms.html#the-form-element
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
depends on
https://lore.proxmox.com/yew-devel/20250505091650.1160565-1-d.csapak@proxmox.com/T/#u
for adding gloo_utils to Cargo.toml
changes from v1:
* use gloo_utils instead of our own wrapper
src/widget/dialog.rs | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/widget/dialog.rs b/src/widget/dialog.rs
index 0bff03c..7eb11ae 100644
--- a/src/widget/dialog.rs
+++ b/src/widget/dialog.rs
@@ -511,7 +511,7 @@ impl Component for PwtDialog {
let style = props.styles.compile_style_attribute(None);
- html! {
+ let dialog = html! {
<dialog class={"pwt-outer-dialog"} {onpointerdown} aria-label={props.title.clone()} ref={props.node_ref.clone()} {oncancel} {onclose} >
<div class={classes} {style} ref={self.inner_ref.clone()}>
{panel}
@@ -527,7 +527,9 @@ impl Component for PwtDialog {
}
</div>
</dialog>
- }
+ };
+
+ create_portal(dialog, gloo_utils::body().into())
}
fn rendered(&mut self, ctx: &Context<Self>, first_render: bool) {
--
2.39.5
_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel