Issue with text_input(s) inside column wrapped in tab

[macvenez]

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

[dataprofessor]

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!

[macvenez]

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

[alechoag]

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