Streamlit text_input displaying empty field with multiple pages

🎈 Using Streamlit
1

In streamlit I have a display issue using a text_input.

Context

I want, with a text_input, to display a path stored in a .yaml file, and if changed in the text field in the app, to be updated in the yaml file.
For what I’m doing, I want this option to be available in 2 different pages.

Setup

For the example, I have three pages:

  • A main page to start the app – that’s an empty page, but it is used to start the app with python (streamlit run Main_page.py)
  • 2 pages (page1 and page2) to show the problem.

The code in page1 and 2 is the same, and is displayed below.
The steps are:

  • Loading the content of the yaml file
  • Creating the “test” key in the session_state if it does not exists
  • Defining the callback function that check if the content of the yaml file is similar to the content of the sessions_state. If not, update the content of the yaml file, and save it.
  • Creating the text_input, with the callbacl function and the test key.
import streamlit as st
import yaml
from pathlib import Path

# Read the yaml file, and load the content
path_to_yaml= Path.cwd().parent / "path.yaml"    
contents = path_to_yaml.read_text()
yaml_content = yaml.safe_load(contents)

# Check if the test field is available in the session_state
if "test" not in st.session_state:
    st.session_state['test']=yaml_content["test"]

# Callback function when changing the value of the text field
def on_change():
    # Update the yaml file if different from the session_state
    if Path(yaml_content['test'])!=Path(st.session_state.test):
        yaml_content['test']=str(st.session_state.test)
        path_to_yaml.write_text(yaml.dump(yaml_content))

# Call the text_input function with the callback function and the "test" key
st.text_input( "Folder location to the parent file ", on_change=on_change(), key="test")

Behavior

After the command streamlit run Main_page.py is run, the app opens on the Main_page, then I click on the page1, and the text_input works fine with the correct value showing. Changing the value of the text input works as expected – the yaml file is correctly updated (show the screenshot below for visualization).

enter image description here

Now if I click on page2, the text_input is displaying nothing. If I go back on page1, the text_input shows nothing neither:

enter image description here

But if I click on the Main_page, then on page1 (or page2), then the text_input displays the correct value again…

Second Test

In page1.py and page2.py, I changed the text_input command

From this:

st.text_input( "Folder location to the parent file ", on_change=on_change(), key="test")

to this:

st.text_input( "Folder location to the parent file ", value=st.session_state.test, on_change=on_change(), key="test")
1 Like
2

Hi @jremid and welcome to our forums! :raised_hands:

The issue may be that you’re invoking the callback function when you’re defining the text_input widget.

Can you please try to amend:

on_change=on_change()

to

on_change=on_change

on both your st.text_input() widgets and see whether that works?

Thanks,
Charly

3

Hi @Charly_Wargnier ,
Thanks for your answer. I tried what you said, removing the bracket when calling the on_change function, but the results are the same.
I added a
st.write(st.session_state) before the text_input, just to check what is stored in it, and this is correct.

Any more ideas are welcome :smiling_face:

1 Like
4

Thank you for the update! :slight_smile:

Could you please send me your code, if possible, so I can further review it?

Thanks,
Charly

5

Hi,
Yes sure. What will be the easiest to send you the data ?
I don’t have it on a online repo…
Either I can send it somewhere (mail ?), I can also share the code in the chat - it is almost 2 files with the code presenting in my first post.

6

Either option works, but we usually prefer having the code in the forum conversations as it can benefit our users! :slight_smile:

Thanks,
Charly

7

Ok, I send everything in this chat - this is quite short

structure of the folder

Main folder with:
→ Main_page.py - main file to run the streamlit app, this file is empty
→ path.yaml - yaml file storing the path. only one line in this file → test: ‘C:\Users\’
→ pages - folder with the streamlit pages. Contains 2 python files: 1_page1.py and 2_page2.py

The content of 1_page1.py and 2_page2.py is similar:

import streamlit as st
import yaml
from pathlib import Path


# Read the yaml file, and load the content
path_to_yaml= Path.cwd() / "path.yaml"    
contents = path_to_yaml.read_text()
yaml_content = yaml.safe_load(contents)

# Check if the test field is available in the session_state
if "test" not in st.session_state:
    st.session_state['test']=yaml_content["test"]

st.write(st.session_state) # Checking the content of the session_state

# Callback function when changing the value of the text field
def on_change():
    # Update the yaml file if different from the session_state
    if Path(yaml_content['test'])!=Path(st.session_state.test):
        yaml_content['test']=str(st.session_state.test)
        path_to_yaml.write_text(yaml.dump(yaml_content))

# Call the text_input function with the callback function and the "test" key
# Option 1 - Just the key parameter is used in the text_input - where the bug appears
st.text_input( "Folder location to the parent file ", on_change=on_change(), key="test")

# Option 2 - The value parameter is also used. It works fine but streamlit displays an error message
# when the app is run, the first time the page is entered.
# st.text_input( "Folder location to the parent file ", value=st.session_state.test, on_change=on_change(), key="test")

And that’s it !
Let me know if I can provide you with anything else,
Thank again for the help

8

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