Issue with text_input(s) inside column wrapped in tab

šŸŽˆ Using Streamlit
1

Summary

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

Code snippet:

import streamlit as st


tab1, tab2 = st.tabs(["TAB1", "TAB2"])

with tab1:
    col1, col2 = st.columns([3,3])
    with col1:
        text1 = st.text_input('Insert text')
    with col2:
        text2 = st.text_input('Insert another text')

Expected behavior:

The other text_input should be possible to input text without clicking on it again to move the cursor inside

Actual behavior:
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

Debug info

  • 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)

Requirements

Streamlit only (versions cited above)

GitHub Repo

streamlit-issue

Additional information

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 columns inside tabs)

EDIT: added GitHub repo

2

Hi @macvenez

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 text_input?

Also, could you share a link or GitHub repo of your app so that the community can use this in devising possible solutions?

Thanks!

3

Thanks for the answer!

Screencast_20231011_210916(2)

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

4

[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:

st.number_input("A")
st.number_input("B")

and

with st.tabs(["Tab"])[0]:
    st.number_input("A")
    st.number_input("B")

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.

1 Like