Creating a Persistent Text Area?

Using Streamlit
,
1

How can I create a text area field that retains its value when you move to a different page and which does not randomly lose changes to it and reset back to the value you had before you started the current edit when you click outside? I have tried many different ways of coding this, but this feels like a simple task for which there should be a canonical answer.

2

Have you tried setting the value using session state?

3

Thank you for replying. I have tried a wide variety of methods, but none of them have worked.

I first set:

if "code_input" not in st.session_state:
    st.session_state.code_input = ""


# Gets session_state[key] if it exists, or default if it does not
def st_session_state_get_or_default(session_state, key, default = ""):
    if key in session_state:
        return session_state[key]
    else:
        return default

# Define a callback function
# From Streamlit docs assistant
def on_change_text():
    # The value is automatically updated in session state via the key
    pass

and then tried each of the following (among other things that I tried and lost the code for):

# Reset when I changed page
code_input = st.text_area(
    label = "label placeholder", 
    height = 300,
    label_visibility = "hidden"
)

st.session_state.code_input = code_input

# StreamlitAPIException: st.session_state.code_input cannot be modified after the widget with key code_input is instantiated.
st.session_state.code_input = st.text_area(
    label = "Label Placeholder",
    value = st.session_state.code_input,
    height = 300,
    key = "code_input",
    on_change = on_change_text,
    label_visibility = "hidden"
)

# Including this did not seem to help
st.session_state.update(st.session_state)

# Resets after you change the page
st.text_area(
    label = "Label Placeholder",
    value = st.session_state.code_input,
    height = 300,
    key = "code_input",
    label_visibility = "hidden"
)

# Calling the do-nothing function did not fix the issue where the value is lost after you change the page
st.text_area(
    label = "Label Placeholder",
    value = st.session_state.code_input,
    height = 300,
    key = "code_input",
    on_change = on_change_text,
    label_visibility = "hidden"
)

# Resets after you change the page
st.text_area(
    label = "Label Placeholder",
    height = 300,
    key = "code_input", 
    label_visibility = "hidden"
)

# Retains value when switching between pages, but still sometimes resets the text area when clicking outside it
st.session_state.code_input = st.text_area(
    label = "label placeholder", 
    value = st_session_state_get_or_default(st.session_state, "code_input", ""),
    height = 300,
    label_visibility = "hidden"
)

I tried many combinations of setting it to “code_input” and then setting that to “st.session_state.code_input”, storing it directly to “st.session_state.code_input”, and not storing it directly, inputting the existing session state value as the “value” parameter, setting and not setting the key, using a do-nothing function, and calling “st.session_state.update()”. I tried reading up online resources (I found Texts Disappering when users click outside the 'text_area' or switching page, but I don’t think that putting the text area in a form is a good solution for me, as in that case, whatever is typed in will not be saved unless you submit) and asking various chatbots (GPT-4o, Bing Chat, Google Chat, Claude 3.5 Haiku, and a chatbot available on the streamlit documentation), but I could not find any solutions.

This issue may be a bit too niche for these LLMs to know about, so I was hoping that people on this forum would have an idea of how you can create a text area whose contents are not lost when switching pages and which does not randomly lose your changes to it when you click outside it.

4

If you use tabs, then you can do this without needing to do anything with keys, values, and the session state, but that does not work for me either, because you cannot have a sidebar in only one tab.

5

Widget persistance across pages can be handled a couple different ways:

  1. If you want the widget to be visible on all pages, the easiest solution is to use st.navigation and st.Page for you app and call the widget in your entrypoint file. The entrypoint file is a like a picture frame around your pages, so if the widget is called there, it doesn’t reset between pages. See example 3 here.
  2. If the widget only exists on a subset of pages, they you need to store and retrieve the value from Session State. An example is shown here.
1 Like
6

Thank you! Example 3 in the “Understanding widget behavior” documentation worked.

7

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