Expander resets its expanded state when new elements are included.

Summary

A expander resets when there are changes in the DOM (like an element is inserted before it). This is likely because the element is unmounted and mounted triggering a reset to the expander itself

Steps to reproduce

1. Run streamlit with the following code:

import streamlit as st
if st.checkbox("I have something"):
    st.write("Checked")
with st.beta_expander("expand"):
    a = st.selectbox("Choose 1", ['1','2'])

1. Open the Expander
2. Click on the checkbox

Expected behavior:

The expander should remain open with “Checked” appearing above it.

Actual behavior:

The expander collapses

Is this a regression?

No

[kmcgrady]

Hi @simonlipsonrisk I can try to provide guidance, but would need to look at the code. The main challenge that always exists is connecting the actual line of code to the specific element in the DOM. In many cases, we connect it correctly, but expanders have been unique as a layout feature and not an element.

This is a result of an element appearing or disappearing before causing a misalignment in this connection. For the example above, The following workaround would work.

import streamlit as st

checked = st.checkbox("I have something")
placeholder = st.empty()
if checked:
    placeholder.write("Checked")
with st.expander("expand"):
    a = st.selectbox("Choose 1", ['1','2'])

Note the use of st.empty() to signify something is there, but not necessarily used is something that allows you to not have this problematic behavior.

Hope that helps!

[davnat]

I think I’m also hit by this, on v1.12.2. I have some expanders with dynamic content inside, and they keep closing whenever something in the content changes: it’s quite annoying. If expanders had a state key I could try to write a workaround, but this is not the case. Do you have any suggestions?