focus an input element when Show becomes active

[M1cha]

When first rendering the element, the browser can set focus itself if I add autofocus to the element, but since I open the input conditionally using the Show component I need a way to do that through leptos as well.

As far as I can tell there's no "element got attached to the DOM" event in leptos.
I've also tried to switch from Show to a closure returning a view! conditionally expecting that'd make leptos re-render the element every time the condition changes. And while the render function is getting called, the autofocus attribute doesn't seem to cause a re-focus the second time.

Maybe leptos never actually creates a new input and just applies the difference instead?
If so, do you have a suggestion for how to implement this seemingly simple functionality?

[gbj]

Could you share some example code to look at?

[M1cha]

of course. I create a full example project(CSR, so just use trunk serve): https://github.com/M1cha/leptos-experiments/tree/input-focus

This is the place where I have to work around the lack of a DOM event using a timer.

[gbj]

HtmlElement<_> has an on_mount function that does exactly what you want. Here's the idiomatic way to do what you're trying to do, I think:

create_effect(cx, move |_| {
    if show.get() {
        if let Some(ref_input) = ref_input.get() {
            ref_input.on_mount(|input| {
                input.focus();
            });
        }
    }
});

[M1cha]

oh how did I miss that function 😊
That works great, thanks a lot 🎉

[ja-he]

Since on_mount seems to be gone since v0.7.0 (with #2607 I believe) I'm wondering what the solution would be now?

(Hope it's OK to ask this here where some searching led me; happy to ask in a new discussion as well. My use case is how the charming crate's WasmRenderer wants to render to a div with an ID, meaning the div has to be mounted.)