How to find out when the user "tabs away" from a text(area)-input?

[matthiasautrata]

The current events are triggered for each key typed. Typically, users use the "tab" key to move on to the next field. How is it possible to catch that "focus lost" event?

Similarly, how is it possible to direct the focus back to a specific widget, e.g., the text-input? Example: The user presses a button or a calculation finished, and I'd like to send the user back to a specific input-field.

[ramedina86]

This was requested by other people too, so I've taken note. I'll add a "ss-change-finish" to react to this.

Furthermore, the next version will support custom events so it'll be much more flexible in this regard. It will be available in ~2 weeks.

Regarding triggering focus, there's no straightforward way to do it but it can be achieved via custom JS.

[matthiasautrata]

Regarding triggering focus, there's no straightforward way to do it but it can be achieved via custom JS.

Apology for being documentation pedantic: Could you add a "useful recipes" section somewhere (or in the FAQ) and give an example?

[ramedina86]

I've prepared a useful recipe and I'll add it here. If this gets a few likes/reactions, I'll add it as standard functionality.

Please note this requires v0.1.12 (the latest version at this time, with support for custom JS).

Create custommod.js in the static folder and add the following contents. This exports a function that looks for a Streamsync component with a given id, then inside it looks for input or textarea elements, then focuses on them.

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

In the Python code you need to import the module. You then call the function and specify the component id (you can get it from Settings, when you select the component it's at the bottom, in grey)

initial_state.import_frontend_module("mymod", "/static/custommod.js")

def handle_submit_button(state):

    # Do other stuff... then trigger the focus

    c_id = "b36b64a1-52f7-4e56-a162-0062c2cf8dc6" # Replace for desired id
    state.call_frontend_function("mymod", "setFocus", [c_id])

Hope that helps!