With this specific layout when I try to move from one
text_input to another by clicking on the second one I can’t directly type as the cursor “disables”. In order to type in the second one I need to click again in it to “enable” the cursor.
Steps to reproduce
import streamlit as st
tab1, tab2 = st.tabs(["TAB1", "TAB2"])
col1, col2 = st.columns([3,3])
text1 = st.text_input('Insert text')
text2 = st.text_input('Insert another text')
The other text_input should be possible to input text without clicking on it again to move the cursor inside
No error message is given. The cursor seems to move correctly in the second
text_input but then it focuses out and it’s impossible to type in the field unless you click again inside it. Same behaviour when using Tab key to move between text_inputs
- Streamlit version: tried with 1.27.2, 1.27.1, 1.27.0
- Python version: 3.11.5
- Using pipenv
- OS version: Arch Linux (Intel 64 bit)- systemd 254 (254.5-1-arch)
- Browser version: FIrefox 118.0.1, Chromium 117.0.5938.149 (same error on both)
Streamlit only (versions cited above)
The error seems to appear only on the first run of the app or on refresh. It doesn’t always happen. It seems like it only gives the issue when using this particular streamlit layout (multiple
text_inputs nested inside
EDIT: added GitHub repo
Just to make sure that we understand the problem that you’re facing, which is, a single click on a second
text_input does not allow you to enter text (as there are no cursor) but it requires two clicks to activate the cursor in the second
Also, could you share a link or GitHub repo of your app so that the community can use this in devising possible solutions?
Thanks for the answer!
Here’s a video of the current behaviour, as you can see (I hope) when I click on the second text_input the cursor moves in the text field but then rapdily disappears, in order to start typing again I have to reselect the text_input. That happens also when the text_input is already filled.
I edited the first post with the github repo link
EDIT: better video
[My first post, so sorry if it’s rough or misplaced.]
I’m having similar problems with number_input fields in a tab layout. There seems to be a change in focus behavior when you surround input fields in a tab layout, e.g. between:
In the first case, you can type a number in “A”, hit tab, and immediately enter a number in “B”. In the second case (with the tab layout) tabbing moves the focus visually, but you can’t actually enter a number (i.e. the keyboard focus hasn’t actually moved). I found the workaround is to type a number in field A and then hit return before hitting tab. Doing this properly moves the focus to B in a tab layout.
Update: I reverted to v1.26 of streamlit and the problem went away. So that is my workaround for now and an indication of where the problem lies.