Set focus by Dash

Dash Python
1

Hello Dash Community!

My question: How to set focus on element (for examle input line) by means of Dash? Is it possible?

2

You could put a JavaScript file in your /assets folder, possibly with a Clientside callback (see the relevant section at the bottom of the page). You could then use the HTMLElement.focus() function from the Web API. For example, given a component with the id text_input_id, you would call document.getElementById("text_input_id").focus();

1 Like
3

Thank you! Clienside callback is very usefull! But I do not understand how can I handle events in this case? Can I handle events as well as in usual javacript or not?

For instance, the code
ā€˜ā€™ā€™
JS
window.dash_clientside = Object.assign({}, window.dash_clientside, {
test_clear: function(ch) {
e=window.event;
if(e.type==ā€˜clickā€™ && e.target.id==ā€˜test_clearallā€™){
alert(ā€œŠšŠ½Š¾ŠæŠŗŠ° Š½Š°Š¶Š°Ń‚Š°ā€);
return ā€˜ā€™;
}

}

});
ā€˜ā€™ā€™
ā€˜ā€™ā€™
PY

app.clientside_callback(
ClientsideFunction(
namespace=ā€˜clientsideā€™,
function_name=ā€˜test_clearā€™
),
Output(ā€˜test_inputā€™, ā€˜valueā€™),
[Input(ā€˜test_clearallā€™, ā€˜childrenā€™)]
)

ā€˜ā€™ā€™
does not work.

4

Thank you very much!
I have done everything what I wanted.

5

@oansh, could you please post your solution here? I need to achieve the same (and Iā€™m not very familiar with JS).

Thanks a lot!

6

Just in case anyone has run into this problem. Think Iā€™ve solved it with a clientside callback with embedded javascript straight into the dash app. No separate .js file needed.