I've been trying to create a filtering dropdown menu in Justpy. I've been using a QSelect component to do this. The second dropdown menu here is what I'd like to build.
I'm able to get the dropdown menu to populate and display the values I want using the input event. I can manually select the value I want this way. My issue is when I use the filter event, the dropdown no longer populates. Instead, I get a spinning "loading" icon.
Here is my code:
import justpy as jp
dropdown_items = [123, 456, 789]
def filter_event(self, msg):
# For testing purposes, just update the list of items in the dropdown to what was typed into dropdown
new_items = [msg.value]
self.options = new_items
def filter_test(request):
wp = jp.QuasarPage(dark=True, tailwind=True, title="Filter Test Page")
d1 = jp.QDiv(text="Select a number", classes="q-pa-md text-xl", style="max-width: 600px", a=wp)
dropdown = jp.QSelect(label="Test dropdown", options=dropdown_items, multiple=True, use_input=True, clearable=True, use_chips=True, padding=True, bordered=True, a=d1)
dropdown.on('filter', filter_event)
return wp
jp.justpy(filter_test)
I've tried calling Quasar methods within my event handler, for example: wp.dropdown.run_method(f'filter({msg.value})', msg.websocket), but that didn't change anything. I've experimented with using different events, filling in different props, etc., but I haven't been able to get any closer.
Perhaps I need to add a model to the QSelect component, but I don't really know what that would like like.
I assume I'm missing something very simple. I don't have any experience with JavaScript, so finding solutions has been very difficult. Any tips or guidance that'll get me closer to a solution is greatly appreciated. Thank you.
