streamlit-elements icon indicating copy to clipboard operation
streamlit-elements copied to clipboard

Autocomplete : renderInput attribute

Open vcourintracks opened this issue 3 years ago • 2 comments

Hi okld and hi everyone, I hope this project still lives because it's very helpful to render nice Streamlit apps.

I'm working with Autocomplete component from MUI but I'm struggling making it works. The issue here is that mui.Autocomplete object needs a renderInput prop (it should be a lambda function returning another component such as TextField). Here is how I proceed to try making it works :

with elements("some-name"):
  options=[{"label": labels[i], "id": i} for i in range(len(labels))] # labels is defined as a list of strings
  autocomplete = mui.Autocomplete(options=options, renderInput=lambda params: mui.TextField(params, label="Some label"))

The problem here is that it throws an ElementsFrameError cause mui.TextField is out of an with elements("id") statement.

I tried some variations such as :

  1. wrapping the mui.TextField in a function defined before the mui.Autocomplete declaration : but it renders the TextField without Autocomplete before other declared elements...
  2. passing a mui.TextField in a with mui.Autocomplete(options=options) statement. As expected, it throws an Exception because the renderInput prop isn't specified...

My question is : How to make mui.Autocomplete work with streamlit-elements module ?

NB : Moreover, I was wondering if we could have some tutorials on how to make Date Pickers work for example. Thank you very much for your help and consideration

Victor

vcourintracks avatar Nov 15 '22 06:11 vcourintracks

@vcourintracks did you figured out how to make autocomplete work?

cardosofede avatar Jul 28 '23 19:07 cardosofede

Anyone figured out how the autocomplete work?

indrasantosa avatar Aug 07 '24 10:08 indrasantosa