Bug w/ Searching in Selectbox?

Using Streamlit
1

I’m working with the select box and I noticed that, when I start typing to help narrow down the search window, it returns results that I am not expecting.

import streamlit as st
st.selectbox('Example', ['None'] + [i for i in range(20)])

Running the above code, you’ll see this page:

temp
temp928×148 1.48 KB

Then, click the select box and type “8”. Now, I would expect the box to only show “8” and “18”, as they contain “8” in them. Instead, we see the following:

temp
temp912×358 6.6 KB

I believe that the underlying search function is also returning results whose index has an “8” in it. After all, because we padded the initial selectbox with “None”, the values of “7” and “17” are actually at indices “8” and “18”.

Typing “0” seems to confirm my suspicions, as “None” is returned (it’s at index 0) along with “0” (as expected), “9” (which is index 10), “10” (as expected), and “19” (which is index 20).

temp
temp907×411 7.54 KB

What can I do to further confirm this issue? I tried looking at the streamlit source code but don’t know enough frontend to determine if this search functionality is part of streamlit’s implementation or rather the underlying React component.

1 Like
2

Hey @kmcentush,

That’s a good find and I think you’re right, you can just try with

import streamlit as st
st.selectbox('Example', ['Hello', 'my', 'name', "is", "john"])

and then type 1 in the search and you will get the word my :slight_smile: .

So I tried peeking the source code like you :laughing: on the frontend side, the options passed to https://baseweb.design/components/select/ in SelectBox.tsx are

options.forEach((option: string, index: number) =>
      selectOptions.push({
        label: option,
        value: index.toString(),
      })

so each index of the array is actually passed as value in the options so that maybe makes the index + the option searchable (I did not delve in the baseui doc yet),

and when you select something in the box, the React part probably returns the index of the option to Python and Python then selects array[index] (I guess it’s the return options[current_value] in DeltaGenerator.py). Well I think that’s what happens :upside_down_face:

So…technically I’d say the way it’s coded makes it possible to search by index and for numerical options that may cause problems in the search :confused: maybe it’s possible to edit the search function to not search by value ?

3

Do you have source code for me please [andfanilo]
text search for any word on streamlit