Select pointer roles back to zero index of the select box options list after selecting an item

[Gourav]

select pointer roles back to zero index of the select box options list after selecting an item.

When we select an item from selectbox list and if we revisit the select box again the option shows from 0th indexed option not from the nth level which we selected previously. Like if we selected 10th indexed item and again if we revisit to select 11 item from select bot i have to again go from 0 th index to 11 th index. Can we somehow show the pointer based on the index we selected previously…

Steps to reproduce

Code snippet:

import streamlit as st
options = ['zero', 'one', 'two', 'three', "1", "2", "3","4","5"]
first = st.selectbox('selectbox 1', options, index=2)

If applicable, please provide the steps we should take to reproduce the error or specified behavior.

Expected behavior:

Can we see the pointer at value 5 when we revisit the select option again so that I can easily select 6 th option instead of scrolling the list from 0 to 11 th position…

[dataprofessor]

Hi @Gourav

By revisiting the selectbox, if you’re meaning to refresh the app and wanting to have the selected option in the selectbox be what was selected prior to the refresh, then I might have a solution for you.

Code

Here’s the documented code:

# Select pointer roles back to zero index of the select box options list after selecting an item 
import streamlit as st

options = ['zero', 'one', 'two', 'three', "1", "2", "3","4","5"]

first = st.selectbox('selectbox 1', options, index=2)

# Here we make use of the st.experimental_get_query_params method to take query parameter from the URL
selected_idx = int(st.experimental_get_query_params()['selected'][0])
second = st.selectbox('selectbox 2', options, index=selected_idx)

Demo App

So if you go to http://localhost:8503/?selected=8 (you can try out other index values from 0 through 8), you’ll see that we were able to assign an index value of 8 to selectbox 2:

Best regards,
Chanin

[Gourav]

@Gourav

import streamlit as st
options = ['zero', 'one', 'two', 'three', "1", "2", "3","4","5"]
first = st.selectbox('selectbox 1', options, index=2)

No not that way… @ dataprofessor

Let me make it bit more clear let say i selected “4” as an input this time from dropdown and next time again revisit the dropdown so instead of showing select option from zero index value insted it should show from option “4”… it doesn’t mean that the options prior to “4” cant be selected or viewed it just that it should show from pointer or it should start from the index or dropdown item selected previously…

[mathcatsand]

I started writing out some JavaScript to do this, but I found an inherent problem…

If the list is about 10 items or less, it can work. When you have any more than that, however, the items more than just-outside-of-view aren’t rendered in the HTML. This means they can’t be grabbed with the JavaScript. Since smaller lists don’t need the scroll, this becomes a solution that is only relevant in the very narrow scope of having 8-10 items exactly.

The JavaScript I started putting together is below. It needs to be refined a little more to make sure it doesn’t grab things from other elements, wrapped into a function, then attached to an event listener to run at the right time when someone clicks on the selectbox to populate the dropdown. So this only a start to a solution, but it’s so narrow in scope that I’m not sure it will be of any use in your specific case. Hence, I’m not sure it’s worth the time to solidify all the rest of those steps.

focus_js='''
<script>
    var selected_element = window.parent.document.querySelector('li[aria-selected="true"]')
    var scroll_amount = selected_element.offsetTop
    var view_box = window.parent.document.querySelector('[data-baseweb="popover"] ul>div')
    view_box.scrollTop = scroll_amount
</script>
'''

Here is a current issue on GitHub for you to vote on to request improvement:

Make `st.selectbox` dropdown scroll along with option in focus, when navigating with arrow keys (↑↓)