Select a selectbox widget using streamlit.components.v1 and querySelector

Using Streamlit
1

Hi Streamlit community,

I am using streamlit.components.v1 to have a button that, when clicked, shows the options of a selectbox widget. See below the example code.

My question is the following:

I want the button to trigger the second/last selectbox always, not just the first one that querySelector finds. Notice the difference in behavior when the changing the selectbox. Do you know how to achieve this?

import streamlit as st
import streamlit.components.v1 as components

if 'counter' not in st.session_state:
    st.session_state.counter = 0

if st.checkbox('Show other selectbox'):
    st.selectbox('Teams',options=['Team 1','Team 2','Team 3'])

st.selectbox('Competitions',options=['League','Cup','Friendly games'])

if st.sidebar.button('Open selectbox'):

    st.session_state.counter += 1

    components.html(f"""
    <p>{st.session_state.counter}</p>
    <script>
    const doc = window.parent.document;
    doc.querySelector('.stSelectbox div[data-baseweb="select"] > div').click(); // same behavior as doc.querySelector('[role="combobox"]').click()
    </script>
    """,height=0,width=0)

Thanks in advance!

3

Question solved here (pasting for everyone’s reference): keyboard shortcuts (feature request) · Issue #1291 · streamlit/streamlit · GitHub

1 Like
4

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