Control effect ordering / dependency

[pheki]

I have an effect that depends on the same signal as the disabled property, but I need it to only after disabled changes. e.g.:

use std::time::Duration;

use leptos::{*, html::Input};

fn main() {
    leptos::mount_to_body(|cx| view! { cx, <App/> })
}

#[component]
fn App(cx: Scope) -> impl IntoView {

    let (is_animating, set_is_animating) = create_signal(cx, true);
    let input: NodeRef<Input> = create_node_ref(cx);

    create_effect(cx, move |was_animating| {
        let is_animating = is_animating.get();
        if !is_animating && was_animating.unwrap_or(false) {
            log!("Will focus!");
            if let Some(input) = input.get() {
                // This doesn't work. It will print "Focused" but it runs while the element is still disabled.
                match input.focus() {
                    Ok(()) => log!("Focused"),
                    Err(err) => log!("Error focusing input: {:?}", err),
                };
            }
        }
        is_animating
    });

    // Pretend this is triggered by some animation ending
    set_timeout(move || set_is_animating.set(false), Duration::from_secs(1));

    view! { cx,
        <input
            type="text"
            node_ref=input
            disabled=move || is_animating.get()
        />
    }
}

Is there any way? The workarounds I found are by using a mutation observer or by controlling the disabled property manually, but it's less declarative.

[gbj]

Does it work if you use request_animation_frame to delay it a tick:

request_animation_frame(move || {
  match input.focus() {
    Ok(()) => log!("Focused"),
    Err(err) => log!("Error focusing input: {:?}", err),
  };
});

[pheki]

Hmmmm yes, it worked! I swear I had tried it... TYSM!