portal works

leptos-rs · Sep 30, 2023 · b7e8567 · b7e8567
1 parent 1244f3d
commit b7e8567
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 15 deletions.
diff --git a/examples/portal/src/lib.rs b/examples/portal/src/lib.rs
@@ -3,6 +3,7 @@ use leptos::*;
 #[component]
 pub fn App() -> impl IntoView {
     let (show_overlay, set_show_overlay) = create_signal(false);
+    let (show_inside_overlay, set_show_inside_overlay) = create_signal(false);
 
     view! {
         <div>
@@ -13,11 +14,18 @@ pub fn App() -> impl IntoView {
             <Show when=show_overlay fallback=|| ()>
                 <div>Show</div>
                 <Portal>
-                    <div style="position: fixed; z-index: 10; width: 100vw; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.5)">
-                        This is in the body element
+                    <div style="position: fixed; z-index: 10; width: 100vw; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); color: white;">
+                        <p>This is in the body element</p>
                         <button on:click=move |_| set_show_overlay(false)>
                             Close Overlay
                         </button>
+                        <button on:click=move |_| set_show_inside_overlay(!show_inside_overlay())>
+                            Toggle inner
+                        </button>
+
+                        <Show when=show_inside_overlay fallback=|| view! { "Hidden" }>
+                            Visible
+                        </Show>
                     </div>
                 </Portal>
             </Show>

diff --git a/leptos/Cargo.toml b/leptos/Cargo.toml
@@ -21,7 +21,7 @@ typed-builder-macro = "0.16"
 serde = { version = "1", optional = true }
 serde_json = { version = "1", optional = true }
 server_fn = { workspace = true }
-web-sys = { version = "0.3.63" }
+web-sys = { version = "0.3.63", features = ["ShadowRoot", "ShadowRootInit", "ShadowRootMode"] }
 wasm-bindgen = { version = "0.2", optional = true }
 
 [features]

diff --git a/leptos/src/portal.rs b/leptos/src/portal.rs
@@ -29,13 +29,12 @@ pub fn Portal(
     children: ChildrenFn,
 ) -> impl IntoView {
     cfg_if! { if #[cfg(any(feature = "hydrate", feature = "csr"))] {
-        use leptos_dom::document;
-        use leptos_reactive::{create_effect, on_cleanup};
-
-        log!("hier");
+        use leptos_dom::{document, Mountable};
+        use leptos_reactive::on_cleanup;
+        use wasm_bindgen::JsCast;
 
         let mount = mount
-            .unwrap_or_else(|| document().body().expect("body to exist"));
+            .unwrap_or_else(|| document().body().expect("body to exist").unchecked_into());
 
         create_render_effect(move |_| {
             let tag = if is_svg { "g" } else { "div" };
@@ -47,19 +46,24 @@ pub fn Portal(
             let render_root = if use_shadow {
                 container
                     .attach_shadow(&web_sys::ShadowRootInit::new(
-                        ShadowRootMode::Open,
+                        web_sys::ShadowRootMode::Open,
                     ))
-                    .ok_or(container)
+                    .map(|root| root.unchecked_into())
+                    .unwrap_or(container.clone())
             } else {
-                container
+                container.clone()
             };
 
-            let _ = render_root.append_child(children().into_view().get_mountable_node());
+            let _ = render_root.append_child(&children().into_view().get_mountable_node());
+
+            let _ = mount.append_child(&container);
 
-            mount.append_child(&container);
+            on_cleanup({
+                let mount = mount.clone();
 
-            on_cleanup(move || {
-                mount.remove_child(&container);
+                move || {
+                    let _ = mount.remove_child(&container);
+                }
             })
         });
     } else {