ITADN

Hydration mismatch on <input value> silently drops all event handlers on the component (no panic, no error)

#4783Closedvivekadishankara 创建于 2026-06-13
**Describe the bug** When the value attribute of an <input> element differs between SSR and WASM hydration, Leptos silently drops ALL event handlers (on:click, on:change, etc.) on the entire component — without any panic, warning, or error message in the console. The component renders visually correct but is completely non-interactive. This differs from the documented behavior in the Hydration Bugs (https://book.leptos.dev/ssr/24_hydration_bugs.html) chapter, which states that hydration mismatches cause a panic (unwrap() on None). Here there is no panic at all **Leptos Dependencies** ```toml leptos = { version = "0.8.19" } leptos_axum = { version = "0.8.9", optional = true } leptos_meta = { version = "0.8.6" } leptos_router = { version = "0.8.13" } ``` **To Reproduce** ``` #[component] pub fn CloneButton(owner: String, name: String) -> impl IntoView { // SSR renders this as "" — server has no window.location // WASM hydrates with the real URL from window.location let url = if cfg!(target_arch = "wasm32") { web_sys::window() .and_then(|w| w.location().origin().ok()) .map(|o| format!("{}/{}/{}", o, owner, name)) .unwrap_or_default() } else { String::new() }; view! { <input id="clone-url" type="text" readonly value={url} /> <span on:click=|_| { // This handler NEVER fires — silently dropped during hydration log::info!("clicked"); }>"Copy"</span> } } ``` Steps: 1. Create an SSR+hydrate Leptos project using cargo-leptos 2. Add the component above to a page 3. cargo leptos watch and load the page 4. Click the "Copy" span — nothing happens, no console output 5. The input shows the correct URL (from window.location), so the mismatch is only on the value attribute 6. No hydration errors or warnings in the console Expected behavior Either: - Best: Leptos should reconcile the value difference gracefully and keep event handlers attached - Acceptable: Leptos should panic/warn clearly, as documented in the Hydration Bugs chapter - Current (worst): Silent failure with no indication that interactivity is broken **Screenshots** <img width="480" height="270" alt="Image" src="https://github.com/user-attachments/assets/9ff22e5e-2aac-4a3a-9f8d-6430c2ac2ef1" /> Workarounds discovered Workaround 1: Bypass Leptos reactivity entirely. Use static HTML with value="", populate the input via document.getElementById()...set_value() in a set_timeout(Duration::from_millis(0)), and handle clicks via window_event_listener(click, ...) — completely outside of Leptos's reactive/hydration system. Workaround 2: Use the input event rather than value attribute. Not applicable here since the input is read-only display, but placeholder does not trigger this bug. Notes - The bug also occurs with on:change and all other Leptos event handler attributes on any element in the same component tree, not just the mis-matching <input>. - This was observed on leptos 0.8.14 through 0.8.19 (latest). - The Leptos book's example of hydration mismatch (different child count) produces a clear panic. A value-attribute mismatch appears to be a different code path that fails silently instead. I would like to add that an AI agent found this issue. I am just reporting this issue. I have to use inline js to circumvent the issue so i filed this bug
关闭于 2026-06-13 1 条评论