[yew-devel] [PATCH yew-widget-toolkit v2] dialog: put all dialogs into a portal

[Dominik Csapak]

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 at 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