Error with key_react

[EdRey05]

Hi, I developed a streamlit app some time ago and recently deployed it to the Streamlit Community Cloud. However, in the process I noticed an error with your searchbox that I haven't had before and would like to see if you may have some insights on it. I attached a screenshot of the error, which always references to the line 163 of your init file and appears not to find the key_react key. This only happens after I search and select one term and try to do another one (I aggregate all selections to make a plot and pass to other widgets).

After some digging, I found out that it is only the version 0.1.7 causing the error. Chaging it to 0.1.5 or 0.1.6 (and nothing else) solves the issue in Codespaces, my local VS Code and the Cloud deployment.

So, it is either something in the package, or my code is not optimal for how the new version handles the "key_react". I am more inclined to think the latter, but I'd like to identify where's the error. I would appreciate if you can tell me what changed from version 0.1.6 to 0.1.7 in terms of dealing with that "key_react". For now, I have set all my requirements.txt files to use the version 0.1.6 (see my working app and code here, just disregard the top spinner and type anything + check some boxes to trigger things).

Note: I do assign a key to my searchbox as follows, it is displayed within a st.column and only when I have an existing df, so it dynamically appears when required.

if not st.session_state["df_to_plot"].empty: with col_1_row_3: st_searchbox(key="selected_gene", search_function=search_genes, default=None, label="Type a gene name here or check/uncheck boxes below", clear_on_submit=True,)

[m-wrzr]

Hey, thanks for the detailed issue description.

I've checked out your app and the issue seems to be here: https://github.com/EdRey05/st-app-001/blob/c2ebfe93b06eed3c8a8766247495c45ffc7e9deb/app.py#L369 - you're overwriting the internal seachbox state and it's initialization changed in the latest version. You'd now also have to add a new key_react here.

But maybe you can also achieve your desired behavior, without overwriting the internal session_state?

selected_gene_result = st_searchbox(
    key=st.session_state["selected_gene_key"],
    search_function=search_genes,
    default=None,
    label="Type a gene name here or check/uncheck boxes below",
    clear_on_submit=True,
)
st.markdown(
    '<hr style="margin-top: +10px; margin-bottom: +10px;">',
    unsafe_allow_html=True,
)

# When the user selects a gene name, automatically check it to display it at the top of the df
if selected_gene_result:
    st.session_state["df_to_plot"].loc[
        st.session_state["df_to_plot"]["Gene"] == selected_gene_result, "Plot?"
    ] = True

If you need a complete reset when the dataset above changes, you can reassign a new value toselected_gene_key, so you don't need to overwrite the internal state. Another option could be to just delete the whole key instead of resetting it, however this might lead to other side-effects, flickering, etc.

[EdRey05]

Hi, I tried some of them and the easiest one was to add "key_react": "A" to the internal state dictionary of the searchbox I was already overwriting.

The other options wouldn't easily address the complete reset when the Preview button is clicked again (new df). I tried a few things but the searchbox was keeping the last selection of the last df, or I required to add more lines of code in several sections to initialize and delete the key, add another check for df change due to the other button, etc.

I have added the minor edit to my app in the Cloud with the newest 0.1.8 version. It works really well given the complex functionality I have, it just blinks when typing the first letter after a first selection has been made so I just have to click on it and type it again. All further searches/selections run smooth! For the purpose and end users of my app it is fine that way.

Thanks a lot for the help!!