Focus and scroll: element references

To call a method of a specific element, create it with dom_element! instead of dom! and take a reference to it with get_ref(). Then the element can be accessed in the js! macro (see "Interacting with JavaScript world") using # before the reference name:

    use vertigo::{bind, dom, dom_element, js};

    let input = dom_element! { <input /> };
    let input_ref = input.get_ref();

    let focus = bind!(input_ref, |_| {
        js! { #input_ref.focus() };
    });

    let notes = dom_element! { <p>"Notes at the bottom of the page"</p> };
    let notes_ref = notes.get_ref();

    let scroll = bind!(notes_ref, |_| {
        js! { #notes_ref.scrollIntoView(vec![("behavior", "smooth".into())]) };
    });

    dom! {
        <div>
            {input}
            <button on_click={focus}>"Focus the input"</button>
            <button on_click={scroll}>"Go to notes"</button>
            {notes}
        </div>
    }

autofocus

Browsers apply the autofocus attribute only once, when the page loads. Vertigo also focuses elements having this attribute when they get mounted later, so it works for elements which appear in response to the user actions:

    use vertigo::{bind, dom, Value};

    let editing = Value::new(false);

    let view = editing.render_value(bind!(editing, |is_editing| {
        if is_editing {
            // Gets focus as soon as it's mounted
            dom! { <input autofocus="autofocus" value="Edit me" /> }
        } else {
            let start = bind!(editing, |_| editing.set(true));
            dom! { <button on_click={start}>"Edit"</button> }
        }
    }));

    dom! {
        <div>{view}</div>
    }