Complete Functionality breaks when reactive child element added to Show tag

[23DarKnight]

When the child element of tag is just a set of static strings it the Show tag, and button tags work. But when I add a signal or any sort in the child element, or even an input tag without any signal, all the buttons and Show functionality stop working. There are no errors in the build yet working stops.

Leptos Dependencies

actix-files = { version = "0.6", optional = true }
actix-web = { version = "4", optional = true, features = ["macros"] }
console_error_panic_hook = "0.1"
http = { version = "1.3.1", optional = true }
leptos = { version = "0.8.2" }
leptos_meta = { version = "0.8.2" }
leptos_actix = { version = "0.8.2", optional = true }
leptos_router = { version = "0.8.2" }
wasm-bindgen = "0.2.106"
surrealdb = {version = "3.0.0", optional = true}
#serde = {version = "1.0.228", features = ["derive"]}
uuid = "1.21.0"
charts-rs = {version = "0.3.27", optional = true}
validator = {version = "0.20.0", optional = true}
cfg-if = "1.0.4"
once_cell = "1.21.3"
chrono = "0.4.44"
num-format = "0.4.4"
thiserror = "2.0.18"

To Reproduce
macOS 26.3
rustup 1.28.2
cargo 1.93.1

const ADD_BTN_STYLE:&str = "bg-[#7734e7] px-8 py-2 rounded text-white transition-all duratin-1000 ease-in-out hover:bg-[#8468e9]";

#[component]
pub fn HomePage () -> impl IntoView {
    let num = RwSignal::new(0);
    let on_click = move |_| {
        num.update(|n| *n += 1);
    };
    view! {
        <div class="bg-gray-900 text-white">
            <NavBar/>
            <div>
                <button on:click=on_click>"Click me: "{ move || num.get() }</button>
            </div>
            <div>
                "Home Page here."
                {move || num.get()}
            </div>
        </div>
    }
}

#[component]
pub fn HomePage () -> impl IntoView {
    let num = RwSignal::new(0);
    let on_click = move |_| {
        num.update(|n| *n += 1);
    };
    view! {
        <div class="bg-gray-900 text-white">
            <NavBar/>
            <div>
                <button on:click=on_click>"Click me: "{ move || num.get() }</button>
            </div>
            <div>
                "Home Page here."
                {move || num.get()}
            </div>
        </div>
    }
}

#[component]
pub fn TeamPage () -> impl IntoView {
    let (if_show_modal, set_if_show_modal) = signal(false);
    let show_modal_toggle = {
        //let if_show_modal = if_show_modal.clone();
        move |_|{
            set_if_show_modal.update(|show| *show =  !*show);
        }
    };
    view! {
        <div class="bg-gray-900 text-white">
            <div><NavBar/></div>
            <div>
            <button on:click=show_modal_toggle class=ADD_BTN_STYLE>"Add"</button>
            </div>
            <div>
            <Show when=move || if_show_modal.get()><AddPersonModal/></Show>

            </div>
        </div>
    }
}
#[component]
pub fn AddPersonModal() -> impl IntoView {
    //field values for form.
    let person_name = RwSignal::new("".to_string());
    //let (person_name, set_person_name) = signal("".to_string());
    //let person_title = RwSignal::new(String::new());
    //let person_level = RwSignal::new(String::new());
    //let compensation = RwSignal::new(String::new());

    // for errors.
    //let (err_msg, set_err_msg) = signal(String::new());
    //let (if_err, set_if_err) = signal(false);

    //to cloase teh modal
    view! {
        <div class=NO_ERR_STYLE>
            <p class="text-white pt-5">"Add New Employee"</p>
            <input type="email"
            bind:value=person_name
                />
        //    <input type="text"
        //    class=INPUT_STYLE
        //    bind:value=person_title/>
        //    <input type="text" 
        //    class=INPUT_STYLE
        //    bind:value=person_level/>
        //    <input type="text" 
        //    class=INPUT_STYLE
        //    bind:value=compensation/>
        </div>
    }
}

output of cargo leptos watch

warning: unused import: `Blank`
 --> src/app/pages/team_page.rs:2:54
  |
2 | use crate::app::components::{NavBar, AddPersonModal, Blank};
  |                                                      ^^^^^
  |
  = note: `#[warn(unused_imports)]` (part of `#[warn(unused)]`) on by default

warning: unused import: `reactive::signal`
 --> src/app/components/add_person_modal.rs:1:26
  |
1 | use leptos::{prelude::*, reactive::signal};
  |                          ^^^^^^^^^^^^^^^^

warning: constant `INPUT_STYLE` is never used
 --> src/app/components/add_person_modal.rs:6:11
  |
6 |     const INPUT_STYLE: &str = "w-full h-12 bg-[#333333] pr-4 pl-6 py-4 text-whi...
  |           ^^^^^^^^^^^
  |
  = note: `#[warn(dead_code)]` (part of `#[warn(unused)]`) on by default

warning: constant `CANCEL_BUTTON_STYLE` is never used
 --> src/app/components/add_person_modal.rs:7:11
  |
7 |     const CANCEL_BUTTON_STYLE: &str = "mt-10 bg-[#555555] px-8 py-2 rounded tex...
  |           ^^^^^^^^^^^^^^^^^^^

warning: constant `ADD_BUTTON_STYLE` is never used
 --> src/app/components/add_person_modal.rs:8:11
  |
8 |     const ADD_BUTTON_STYLE: &str = "mt-10 bg-[#7734e7] px-8 py-2 rounded text-w...
  |           ^^^^^^^^^^^^^^^^

warning: constant `ERR_STYLE` is never used
  --> src/app/components/add_person_modal.rs:10:11
   |
10 |     const ERR_STYLE: &str = "flex flex-col bg-[#222222] border-t-8 border-[#77...
   |           ^^^^^^^^^

   Compiling dashboard v0.1.0 (/Users/atharva/My_Projects/rustpro/dashboard)
warning: unused import: `Blank`
 --> src/app/pages/team_page.rs:2:54
  |
2 | use crate::app::components::{NavBar, AddPersonModal, Blank};
  |                                                      ^^^^^
  |
  = note: `#[warn(unused_imports)]` (part of `#[warn(unused)]`) on by default

warning: unused import: `reactive::signal`
 --> src/app/components/add_person_modal.rs:1:26
  |
1 | use leptos::{prelude::*, reactive::signal};
  |                          ^^^^^^^^^^^^^^^^

warning: constant `INPUT_STYLE` is never used
 --> src/app/components/add_person_modal.rs:6:11
  |
6 |     const INPUT_STYLE: &str = "w-full h-12 bg-[#333333] pr-4 pl-6 py-4 text-whi...
  |           ^^^^^^^^^^^
  |
  = note: `#[warn(dead_code)]` (part of `#[warn(unused)]`) on by default

warning: constant `CANCEL_BUTTON_STYLE` is never used
 --> src/app/components/add_person_modal.rs:7:11
  |
7 |     const CANCEL_BUTTON_STYLE: &str = "mt-10 bg-[#555555] px-8 py-2 rounded tex...
  |           ^^^^^^^^^^^^^^^^^^^

warning: constant `ADD_BUTTON_STYLE` is never used
 --> src/app/components/add_person_modal.rs:8:11
  |
8 |     const ADD_BUTTON_STYLE: &str = "mt-10 bg-[#7734e7] px-8 py-2 rounded text-w...
  |           ^^^^^^^^^^^^^^^^

warning: constant `ERR_STYLE` is never used
  --> src/app/components/add_person_modal.rs:10:11
   |
10 |     const ERR_STYLE: &str = "flex flex-col bg-[#222222] border-t-8 border-[#77...
   |           ^^^^^^^^^

warning: `dashboard` (lib) generated 6 warnings (run `cargo fix --lib -p dashboard` to apply 2 suggestions)
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 2.67s
       Cargo finished cargo build --package=dashboard --lib --target-dir=/Users/atharva/My_Projects/rustpro/dashboard/target/front --target=wasm32-unknown-unknown --no-default-features --features=hydrate
       Front generating JS/WASM with wasm-bindgen
       Using wasm-bindgen version 0.2.111 detected in project
    Finished generating JS/WASM for front in 253.286ms
warning: `dashboard` (lib) generated 6 warnings (run `cargo fix --lib -p dashboard` to apply 2 suggestions)
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 4.05s
       Cargo finished cargo build --package=dashboard --bin=dashboard --no-default-features --features=ssr
       Watch updated Server, Front. Server restarting
     Serving at http://127.0.0.1:3000
listening on http://127.0.0.1:3000
listening on http://127.0.0.1:3000
listening on http://127.0.0.1:3000
listening on http://127.0.0.1:3000
listening on http://127.0.0.1:3000
listening on http://127.0.0.1:3000
listening on http://127.0.0.1:3000
listening on http://127.0.0.1:3000
listening on http://127.0.0.1:3000
listening on http://127.0.0.1:3000

1. I have added these components to the basic lepton actix template. When i comment out the signal and the input tag in the AddPersonModal both the counter (on homepage) and Show tag in teampage works fine.
2. Now when i add the signal() or RwSignal::new() and the input tag both the counter (HomePage) and the Show tag (TeamPage) stops working for some reason.
3. There are no errors what so ever in the logs/the output of cargo leptos watch.

• I want someone else to take the time to fix this

[gbj]

I can't compile the example you've provided due to the missing pieces. When I try to compile it with what I have, it works fine. Can you please provide a minimal reproducible example of the problem, including your full Cargo.toml? Thanks.

What I tried (worked fine): cargo leptos new --git start-actix and edit app.rs to the following

use leptos::prelude::*;
use leptos_meta::{provide_meta_context, Stylesheet, Title};
use leptos_router::{
    components::{Route, Router, Routes},
    StaticSegment, WildcardSegment,
};

#[component]
pub fn App() -> impl IntoView {
    // Provides context that manages stylesheets, titles, meta tags, etc.
    provide_meta_context();

    view! {
        // injects a stylesheet into the document <head>
        // id=leptos means cargo-leptos will hot-reload this stylesheet
        <Stylesheet id="leptos" href="/pkg/i4601.css"/>

        // sets the document title
        <Title text="Welcome to Leptos"/>

        // content for this welcome page
        <Router>
            <main>
                <Routes fallback=move || "Not found.">
                    <Route path=StaticSegment("") view=HomePage/>
                    <Route path=WildcardSegment("any") view=|| "Not found"/>
                </Routes>
            </main>
        </Router>
    }
}

#[component]
pub fn HomePage() -> impl IntoView {
    let num = RwSignal::new(0);
    let on_click = move |_| {
        num.update(|n| *n += 1);
    };
    view! {
        <div class="bg-gray-900 text-white">
            <div>
                <button on:click=on_click>"Click me: "{ move || num.get() }</button>
            </div>
            <div>
                "Home Page here."
                {move || num.get()}
            </div>
        </div>
    }
}

#[component]
pub fn TeamPage() -> impl IntoView {
    let (if_show_modal, set_if_show_modal) = signal(false);
    let show_modal_toggle = {
        //let if_show_modal = if_show_modal.clone();
        move |_| {
            set_if_show_modal.update(|show| *show = !*show);
        }
    };
    view! {
        <div class="bg-gray-900 text-white">
            <div>
            <button on:click=show_modal_toggle class="add btn">"Add"</button>
            </div>
            <div>
            <Show when=move || if_show_modal.get()><AddPersonModal/></Show>

            </div>
        </div>
    }
}
#[component]
pub fn AddPersonModal() -> impl IntoView {
    //field values for form.
    let person_name = RwSignal::new("".to_string());
    //let (person_name, set_person_name) = signal("".to_string());
    //let person_title = RwSignal::new(String::new());
    //let person_level = RwSignal::new(String::new());
    //let compensation = RwSignal::new(String::new());

    // for errors.
    //let (err_msg, set_err_msg) = signal(String::new());
    //let (if_err, set_if_err) = signal(false);

    //to cloase teh modal
    view! {
        <div class="no err">
            <p class="text-white pt-5">"Add New Employee"</p>
            <input type="email"
            bind:value=person_name
                />
        //    <input type="text"
        //    class=INPUT_STYLE
        //    bind:value=person_title/>
        //    <input type="text"
        //    class=INPUT_STYLE
        //    bind:value=person_level/>
        //    <input type="text"
        //    class=INPUT_STYLE
        //    bind:value=compensation/>
        </div>
    }
}

[23DarKnight]

cargo.toml

[package]
name = "dashboard"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
actix-files = { version = "0.6", optional = true }
actix-web = { version = "4", optional = true, features = ["macros"] }
console_error_panic_hook = "0.1"
http = { version = "1.3.1", optional = true }
leptos = { version = "0.8.2" }
leptos_meta = { version = "0.8.2" }
leptos_actix = { version = "0.8.2", optional = true }
leptos_router = { version = "0.8.2" }
wasm-bindgen = "0.2.106"
surrealdb = {version = "3.0.0", optional = true}
#serde = {version = "1.0.228", features = ["derive"]}
uuid = "1.21.0"
charts-rs = {version = "0.3.27", optional = true}
validator = {version = "0.20.0", optional = true}
cfg-if = "1.0.4"
once_cell = "1.21.3"
chrono = "0.4.44"
num-format = "0.4.4"
thiserror = "2.0.18"

[features]
csr = ["leptos/csr"]
hydrate = ["leptos/hydrate"]
ssr = [
#  "dep:surrealdb",
  "dep:charts-rs",
  "dep:validator",
  "dep:actix-files",
  "dep:actix-web",
  "dep:leptos_actix",
  "leptos/ssr",
  "leptos_meta/ssr",
  "leptos_router/ssr",
]

# Defines a size-optimized profile for the WASM bundle in release mode
[profile.wasm-release]
inherits = "release"
opt-level = 'z'
lto = true
codegen-units = 1
panic = "abort"

[package.metadata.leptos]
# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
output-name = "dashboard"
# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
site-root = "target/site"
# The site-root relative folder where all compiled output (JS, WASM and CSS) is written
# Defaults to pkg
site-pkg-dir = "pkg"
# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
style-file = "./style/main.scss"
tailwind-input-file = "./style/tailwind.css"
# Assets source dir. All files found here will be copied and synchronized to site-root.
# The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir.
#
# Optional. Env: LEPTOS_ASSETS_DIR.
assets-dir = "assets"
# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
site-addr = "127.0.0.1:3000"
# The port to use for automatic reload monitoring
reload-port = 3001
# [Optional] Command to use when running end2end tests. It will run in the end2end dir.
#   [Windows] for non-WSL use "npx.cmd playwright test"
#   This binary name can be checked in Powershell with Get-Command npx
end2end-cmd = "npx playwright test"
end2end-dir = "end2end"
#  The browserlist query used for optimizing the CSS.
browserquery = "defaults"
# The environment Leptos will run in, usually either "DEV" or "PROD"
env = "DEV"
# The features to use when compiling the bin target
#
# Optional. Can be over-ridden with the command line parameter --bin-features
bin-features = ["ssr"]

# If the --no-default-features flag should be used when compiling the bin target
#
# Optional. Defaults to false.
bin-default-features = false

# The features to use when compiling the lib target
#
# Optional. Can be over-ridden with the command line parameter --lib-features
lib-features = ["hydrate"]

# If the --no-default-features flag should be used when compiling the lib target
#
# Optional. Defaults to false.
lib-default-features = false

# The profile to use for the lib target when compiling for release
#
# Optional. Defaults to "release".
lib-profile-release = "wasm-release"

```

My code also compiles with no errors. I have given output of `cargo leptos watch` where there are no errors. The issue is that the basic counter on the homepage and the Show tag does not work. When i press the button it does not change the value of the counter of the boolean. 

@gbj  can you add the team page to the router and then check if the webpage works as it should in the browser. I don't have any issues compiling this code. But it does not work as expected. I even tried add a basic log function and when i pressed the button the logging did not get triggered.