Clicking the button while losing focus in text-area (or text_input) will cause the page to lose its components

I am in a local development environment
streamlit==1.36.0
python==3.12.3

Enter some text in text-area, do not click on any area (the input focus is still in text-area), and then click the button below.
The buttons below sometimes disappear, and the number of buttons that disappear is not fixed.
In my project, it often occurs, perhaps due to a lot of code logic.
Then I wrote an example, but the probability of it appearing in the example is very low and may require repeated testing.
My code is as follows:

import streamlit as st
from pandas import DataFrame


@st.experimental_dialog("DIALOG", width="large")
def show_dialog():
    user_input = st.text_area("input text:")

    cols = st.columns(3)
    with cols[0]:
        query_button = st.button(f"query")

    with cols[1]:
        save_button = st.button(f"save")

    with cols[2]:
        train_button = st.button(f"train")

    if query_button:
        if user_input == '':
            st.error('Please input text')
        else:
            df = DataFrame({
                'year': ['2010', '2011', '2012', '2013', '2014'],
                'value': [100, 150, 200, 180, 210]
            })
            st.write(f"You input: {user_input}")
            st.write(df)
    elif save_button:
        if user_input == '':
            st.error('Please input text')
        else:
            st.success(f"save: {user_input}")
    elif train_button:
        if user_input == '':
            st.error('Please input text')
        else:
            st.success(f"train: {user_input}")


if st.button("OPEN DIALOG"):
    show_dialog()

In the image below, this bug is reproduced. My code has three buttons, but only two buttons are shown in the picture.

By the way, I forgot to explain. The more detailed testing steps are:

  1. Modify the text-area text (do not click on any area to keep the input focus on text-area)
  2. Click the query button
    Before each query button, it is necessary to modify the text of text-area.

I found during debugging that:
When text-area loses input focus alone, the function will be rerun
Clicking the query button also reruns the function
Perhaps this is due to two short interval reruns of the function causing the page to display incorrectly? (Just for my guess)

Maybe changing your “elif” statements for save_button and train_button to just “if” would help

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.