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.