`on:blur` timing leading to access of disposed signal

[bicarlsen]

Describe the bug
I'm not sure if this is an actual bug or is intended/expected behavior, but it tripped me up, so thought it was at least worth documenting.

I have an blur handler bound to an <input> in a <form>. The blur handler reads a local signal. When the form is submitted it removes itself from the DOM. This resulted in the famous you are trying to access a signal that has already been disposed of error.

Moving the blur handler to the <form> resolved the issue, which is fine for my use case.

e.g.

#[component]
fn Parent() -> impl IntoView {
  let (show_form, set_show_form) = signal(true);
  show_form.get().then_some(view! { <MyForm set_show_form /> })
}

#[component]
fn MyForm(set_show_form: WriteSignal<bool>) -> impl IntoView {
  let (input, set_input) = signal("".to_string());

  let onblur = move |_| {
    log!(input.get());
  };

  let onsubmit = move |e: SubmitEvent| {
    e.prevent_default();
    set_show_form(false);
  };

  view! {
    <form on:submit=onsubmit>
      <input 
        bind:value=(input, set_input)
        onblur=onblur
      />
    <form>
  }
}

My guess is that this is caused by the <form> submission removing the <MyForm /> component from the DOM. This then calls the blur method for the <input> which tries to read the signal, which was disposed of when <MyForm /> was removed.

Leptos Dependencies

leptos = { version = "0.8", features = ["nightly", "csr"] }
leptos_meta = { version = "0.8" }
leptos_router = "0.8"
reactive_stores = "0.3"

Next Steps

• I will make a PR
• I would like to make a PR, but need help getting started
• I want someone else to take the time to fix this
• This is a low priority for me and is just shared for your information

[bicarlsen]

You can also use the try_* variants (e.g. try_read, try_with) to combat this.