Make Text Field Editable

Using Streamlit
,
1

Hi,
I am very new to Streamlit. So for a project, I have been trying to make st.text_input editable. So far, I have tried something like this:

for i, question in enumerate(st.session_state.question_list):
                st.session_state.idx = i
                st.sidebar.subheader(f"Question {i+1}")
                st.session_state.edited_question = st.sidebar.text_input(
                    f"Edit the question {i+1}: ",
                    value = question,
                    key="widget3",
                    on_change=on_press
                )

But the problem is, maybe because of Streamlit’s refreshing the whole page behaviour, the module is not getting edited and the entire loop is getting executed at once.

Is there any workaround to this problem?

I am basically looking for like below:
Let’s say for example, someone already asked a question:

  1. What is your name.

Now, they want to edit the question and add a question mark after it (for example).
Then they will press the “Edit” button, and the question will be editable. After their edit, people can press the Done/Complete button to continue on to further functions.

I am really stuck in here. I would be very grateful if anyone pointed me in the correct direction. Thanks in advance.

2

I am not sure I am following you. Doesn’t st.data_editor provide that functionality out of the box?

questions = st.data_editor(
    data=pd.Series([],name="questions", dtype=object),
    column_config={"questions": st.column_config.TextColumn()},
    num_rows="dynamic"
)
3

Hi, thanks for the code snippet but I am trying to edit text field. So, for this solution I have to convert the list into dataframe and then edit that datafrmae, isn’t it?

4

If you already have a list of questions you can use it for the initial value.

data=pd.Series(initial_questions, name="questions", dtype=object)

The Series is needed only for the case where the list is empty. It you can guarantee that it will never be empty, you can use just the list.

data=initial_questions
5

Yes, it won’t be empty because the list will be initiated after user inputs. And then I can transfer it to Pandas df.
Thanks a lot for the suggestions.

6

Hi, I have tried this way:

if st.sidebar.button("Edit") and pdf_docs:
            data = pd.DataFrame(st.session_state.question_list, columns=["Questions"], dtype=object)
            edited_df = st.sidebar.data_editor(
                data = data,
                column_config = {
                    "questions": st.column_config.TextColumn()
                },
                num_rows="dynamic"
            )

Now, the problem is that after the edit, I want to see the updated dataframe. But when I press the “Edit” button, the entire block gets executed. Rather, I want to update rows, save them, and then work on the updated dataframe. Is it actually possible in Streamlit? Because, with the st.text_input() function, I faced the same problem.

Do I need an “on_change” callback to locate where the change has happened and update accordingly?

Thanks in advance. :slight_smile:

7

After the edit, the script reruns (unless the data editor is inside a form) and the values of all variables is lost.

The updated dataframe is in edited_df, but if you want it to survive reruns you need to keep it in session state.

8

Hi, I tried this, and it did not work either. The problem is actually providing editing facilities dynamically. That specific functionality cannot be handled with a loop, as the editing option requires a st.text_input() type function that runs all the way until the end of the loop and does not wait for the value. I could not figure out that solution. I tried with form, the same thing happens. I guess dynamically row by row eidt is still upcoming or maybe I am thinking totally wrong.

My code so far (with form):

if st.sidebar.button("Edit") and pdf_docs:
            st.session_state.data_frame = pd.DataFrame(st.session_state.question_list, columns=["Questions"], dtype=str)
            with st.sidebar.form("Edit Data"):
                for idx, row in st.session_state.data_frame.iterrows():
                    st.write(row["Questions"])
                    if edit_input:= st.text_input("Question", key=f"edit_question{idx}"):s
                        # print("Edited Input: ", edit_input)
                        st.session_state.edited_questions[idx] = edit_input

So, I have to leave this part, I guess, and do something else to mitigate this. Thank you a lot by the way for all these suggestions.

9

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