Setting input textarea properties on the fly

[sriver]

Hi,
I'm updating an input textarea component dynamically and would like to expand / shrink the textarea size based on this instead of doing this manually in the web UI. In thoughts on this?

[ramedina86]

Hi,

This is doable, but you'll need custom JS.

By the way, there's the Rows attribute which you could easily link a state element to, but the challenge becomes using Python to know how many rows the rendered text will have. Seems like a tough problem, hence I recommend the approach below.

I tried the following and it seems to work well.

In your JS module:

export function autogrowTextarea(componentId) {
    const selector = `[data-streamsync-id="${componentId}"]`;
    const el = document.querySelector(selector).querySelector("textarea");
    if (!el) return;

    // Assigns the height of the element to be the full height of the contents (scrollHeight)

    el.style.height = `${ el.scrollHeight }px`;
}

In your Python script:

def load_long_text(state):
    state["long_text"] = """
    This
    text
    is shown
    across
    several
    lines.
    """

    # Get component id for the Textarea, from Settings, at the bottom

    c_id = "678960b6-ca24-4499-8517-89fc51ca0eb5"
    state.call_frontend_function("mymod", "autogrowTextarea", [c_id])

initial_state = ss.init_state({
    "long_text": "Not long for now",
})
initial_state.import_frontend_module("mymod", "/static/custommod.js?6")