[Page refresh incorrectly] Option-menu component bug due to st.experimental_set_query_params

[moonbug-car]

Summary

The option menu UI refresh and back to the default after the st.experimental_set_query_params runs
I tried to use the session state to store the index but no luck. The value is correct just the UI is incorrect.

Here is the detail:

I have a menu inside the sidebar like this

When I click the third option it supposed to become this, the third option will be highlighted

but after the page runs the st.experimental_set_query_params
The UI of the option menu will refresh itself and become this

even the third option is selected indeed (the value is correct just the UI is not correct)

Reproducible Code Example

import streamlit as st
from streamlit_option_menu import option_menu

with st.sidebar:
    a_menu = st.selectbox('A', ["1", "2", "3"])

if a_menu == "1":

    with st.sidebar:
        st.markdown("---")
        b_menu_list = ["a", "b", "c"]
        b_menu = option_menu(None, b_menu_list)
            
    st.experimental_set_query_params(
        a_menu=a_menu,
        b_menu=b_menu
    )

Steps To Reproduce

1. Select an option in selectbox (a_menu)
2. Select an option in option_menu(b_menu)

Debug info

• Streamlit version: 1.16.0
• streamlit_option_menu: 0.3.2
• Python version: 3.10
• Operating System: Google Cloud Run
• Virtual environment: Google Cloud Run

[fgdvir]

I don't know if and how we can solve this in the component's level, since streamlit reloads the page when the experimental_set_query_params is being used, which means the whole component is reloads, so you see the component with its initial (default) value.

A simple workaround you can do is to save the state and insert it as a default_value:

import streamlit as st
from streamlit_option_menu import option_menu

with st.sidebar:
    a_menu = st.selectbox('A', ["1", "2", "3"])


with st.sidebar:
    st.markdown("---")
    b_menu_list = ["a", "b", "c"]
    default_index_val = st.session_state.get('test', b_menu_list[0])
    default_index = b_menu_list.index(default_index_val)
    b_menu = option_menu(None, b_menu_list,default_index=default_index,  key='test')
        
st.experimental_set_query_params(
    a_menu=a_menu,
    b_menu=b_menu
)

[moonbug-car]

@fgdvir Thank You for the reply!
I have tried but no luck =[
One thing might be helpdful is the highlight is in the correct option when I using direct link (URL with query params).