farbodr
December 14, 2022, 7:28pm
1
I’m sure this has been answered, but I can’t find it here. Is there a way to set the focus to text_input?
FR
TomJohn
December 14, 2022, 7:41pm
2
As I was researching this feature recently, two links:
opened 09:28AM - 12 Oct 21 UTC
type:enhancement
area:widgets
### Problem
When users have to provide data via TextInput elements there shou… ld be a way to
guide them through forms or text fields by activating them on load.
That way it is possible to e.g. activate elements one after another when a
callback function is triggered on button click or text is sent with Enter.
### Solution
As e.g. with 'autocomplete', the 'TextWidgetsMixin' should forward a parameter 'focus' or 'autofocus'
to the React component.
---
Community voting on feature requests enables the Streamlit team to understand which features are most important to our users.
**If you'd like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.**
Hello,
I came across this topic when I was trying to find a way to .focus() a text input when the script is rerun
The approach shown there works fine, but I would like to know why it only
works when st.session_state['counter'] changes. It the line where it is incremented is commented the text box will not focus. If the counter increases, the text box
is focused when the button is clicked, the text input is sent via Enter or the select box changes (every time the callback is triggered).
Thi…
Just to follow up on this subject. I have tested this method:
# this part of the code focuses input on text window
components.html(
f"""
<div>some hidden container</div>
<p>{st.session_state.counter}</p>
<script>
var input = window.parent.document.querySelectorAll("input[type=text]");
for (var i = 0; i < input.length; ++i) {{
input[i].focus();
}}
</script>
""",
height=0,
)
and it works very well. You just need to put some counter in your code.