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 0287D1FF15C
for <inbox@lore.proxmox.com>; Fri, 2 May 2025 15:03:59 +0200 (CEST)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id 93E7730C16;
Fri, 2 May 2025 15:04:12 +0200 (CEST)
From: Dominik Csapak <d.csapak@proxmox.com>
To: yew-devel@lists.proxmox.com
Date: Fri, 2 May 2025 15:04:08 +0200
Message-Id: <20250502130408.3893193-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.021 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. [whatwg.org, dialog.rs, proxmox.com]
Subject: [yew-devel] [PATCH yew-widget-toolkit] 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>
---
this relies on my previous patch:
https://lore.proxmox.com/yew-devel/20250502124951.3886328-1-d.csapak@proxmox.com/
during my tests, i did not run into any problems, but this change
warrants longer tests, since it's a relatively big change in dom markup.
src/widget/dialog.rs | 8 +++++---
1 file changed, 5 insertions(+), 3 deletions(-)
diff --git a/src/widget/dialog.rs b/src/widget/dialog.rs
index aba77cc..6f492ff 100644
--- a/src/widget/dialog.rs
+++ b/src/widget/dialog.rs
@@ -12,7 +12,7 @@ use yew::prelude::*;
use yew::virtual_dom::{Key, VComp, VNode};
use crate::dom::align::{align_to_viewport, align_to_xy, Point};
-use crate::dom::{get_document, get_window, IntoHtmlElement};
+use crate::dom::{get_body, get_document, get_window, IntoHtmlElement};
use crate::prelude::*;
use crate::props::{AsCssStylesMut, CssStyles};
use crate::widget::{ActionIcon, Panel};
@@ -500,7 +500,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}
@@ -516,7 +516,9 @@ impl Component for PwtDialog {
}
</div>
</dialog>
- }
+ };
+
+ create_portal(dialog, get_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