Dynamic loading of ui.select options -> event handling error

[platinops]

Description

I was trying to create a custom element to dynamically load the items from a long list that I do not want to transfer entirely to the client.

from typing import List, Any, Optional
import re

from nicegui import ui, events

options = []
for letter in ["A", "B", "C"]:
    options += [f"Option {letter}-{i:05d}" for i in range(10)]


class FilteredSelect(ui.select):
    def __init__(
        self,
        options: List,
        label: Optional[str] = None,
        value: Any = None,
        max_items: int = 20,
    ) -> None:
        super().__init__(options=[], label=label, value=value, with_input=True)
        self.max_items = max_items
        self.all_options = options
        self.set_limited_options(options)
        self._props["input-debounce"] = 100
        self.on("input-value", self.handle_filter)

    def set_limited_options(self, options: List) -> List:
        if len(options) > self.max_items:
            options = options[: self.max_items]
            options.append("...")
        self.options = options

    def handle_filter(self, e: events.GenericEventArguments):
        search_value = str(e.args)
        regex_text = re.escape(f"{search_value}*").replace("\*", ".*")
        regex = re.compile(regex_text, re.IGNORECASE)
        options = [o for o in self.all_options if re.match(regex, str(o))]
        self.set_limited_options(options)
        self.update()


with ui.row():
    with ui.column():
        ui.select(options, label="Select a value", with_input=True).classes("w-40")
    with ui.column():
        FilteredSelect(options, label="Select a value", max_items=3).classes("w-40")

ui.run()

The idea is you can filter the items using a search string such as "Opt*B-0".

The filtering in itself works fine, but when I actually select the item, I get a list index out of range error. Is this a bug or is the above not the way to go about this?

[falkoschindler]

Hi @platinops,

This is a very strange bug. I reproduced it with this line of code:

ui.select([], with_input=True) \
    .on("input-value", lambda e: e.sender.set_options([o for o in ['A1', 'A2'] if o[0] == e.args]))

But it doesn't occur when replacing parts of it with for o in ['A', 'B', 'C'], o[0] == 'A' or o[0] in e.args.
What is going on? What is so special about this particular code?

[platinops]

Hi @falkoschindler,

Thanks for looking into this.

When you type "A" and then select "A1" from the dropdown, an input-value event is triggered where e.args='A1':

• o[0] in e.args matches both options ('A' is in 'A1' and 'A' is in 'A2').
• o[0] == e.args results in no match ('A' is not equal to 'A1' and not equal to 'A2'). So the new options are []. So the selected 'A1' is not one of the options => an error ensues.

However in this case:

ui.select([], with_input=True) \
    .on("input-value", lambda e: e.sender.set_options([o for o in ['A1', 'A2'] if e.args in o]))

I do not get the error if I type "A" and select the first item "A1".
I do get the error if I type "A" and select the second item "A2".

Can you reproduce this?

[falkoschindler]

Ah ok, I think I understand what is happening:

When selecting "A2" from the dropdown, there a three events happening: "input-value", "update:model-value", "popup-hide".

1. Your "input-value" handler removes all options but "A2".
2. The "update:model-value" handler tries to update the value property.
3. The "popup-hide" keeps record of whether the popup is currently open or closed.

The problem with the "update:model-value" event is that individual options are communicated to the client as indices. (See #102 and 8991ce1 for details about why we chose to do that.) But since the options list has just been altered, the new index is invalid.

One workaround might be to add a short delay to await other events and to update options only if it isn't the initial input to open the popup of if it is currently showing the popup:

async def handle_input(e):
    await asyncio.sleep(0.1)  # receive possible show-popup or hide-popup events
    if not e.sender.options or e.sender.is_showing_popup:
        e.sender.set_options([o for o in ['A1.0', 'A1.1', 'A1.2', 'A2.0', 'B1.0', 'B2.0'] if e.args in o])

select = ui.select([], with_input=True).on("input-value", handle_input)

Or you overwrite the filter function (see https://quasar.dev/vue-components/select#example--filtering-options) and fetch new options from the server.

[platinops]

Okey, thanks for further looking into this!

There are two minor downsides of the sleep workaround:

• There's a slight additional delay.
• When I type B, and select B1.0, the dropdown keeps showing both B1.0 and B2.0.

By "overwrite the filter function", do you mean the browser getting the options from the server through JavaScript (rather than the server pushing them through Python)? Not sure how to do that with my limited JS knowledge. Being able to limit yourself to Python is one of the main advantages of NiceGUI :)

Would you be willing to accept a PR with below change? This way the additional sleep (and thus delay) is not required and other users will not bump into this behaviour.

diff --git a/nicegui/elements/select.py b/nicegui/elements/select.py
index c008fe77..7fe9162c 100644
--- a/nicegui/elements/select.py
+++ b/nicegui/elements/select.py
@@ -106,8 +106,10 @@ class Select(ValidationElement, ChoiceElement, DisableableElement, component='select.js'):
                 if isinstance(e.args, str):
                     new_value = self._handle_new_value(e.args)
                     return new_value if new_value in self._values else None
-                else:
+                elif isinstance(self._values, dict):
                     return self._values[e.args['value']]
+                else:
+                    return e.args['label']
 
     def _value_to_model_value(self, value: Any) -> Any:
         # pylint: disable=no-else-return

[falkoschindler]

@platinops Interesting! Can you explain why this works? I'm struggling to understand, and thus can't foresee any side effects.

[platinops]

Hi @falkoschindler

In all honesty, I do not fully grasp what _event_args_to_value is intended for, which events it handles, or how to determine on the server's end which event has fired.

What I did see, is that ValueElement._event_args_to_value simply returns e.args:

def _event_args_to_value(self, e: GenericEventArguments) -> Any:
    return e.args

For Select._event_args_to_value (which inherits from ValueElement), it seems like: self._values[e.args['value']] tries to return the label that corresponds to the argument's value. This does not work if self._values is not a dict {value1: label1, value2: label2, ...}. The error occurs for e.args = {'value': 1, 'label': 'A2'} while self.values = ['A2']. So in this case where self._values is actually a list rather than a dict, I guessed the label "A2" should simply be returned for such events?

I now also understand why I did not see an error in this case:

I do not get the error if I type "A" and select the first item "A1".

In this case, e.args = {'value': 0, 'label': 'A1'} and self._values = ['A1']. So self._values[e.args['value']] evaluates to self._values[0] = 'A1' which works out fine.

[platinops]

Hi @falkoschindler, apologies for the bump, but would you mind taking another look at this?

[falkoschindler]

Sorry for keeping you waiting so long, @platinops! I had this issue on my list - now I finally found the time and focus to dive into it once again.

Unfortunately, I see a major problem with your proposed change:
By definition, self._values is a list. So the elif case should never happen and you're basically replacing self._values[e.args['value']] with e.args['label'].
But in case options is a dictionary and the user distinguishes between label and value, _event_args_to_value must not simply return e.args['label'] but needs to look up the corresponding value.

[platinops]

Thanks for the feedback @falkoschindler!

I think NiceGUI using indices makes this too complex for me to find a suitable fix.

I ended up creating a simpler Element that just handles lists:

class QSelect(ValidationElement, ValueElement, DisableableElement):
    def __init__(
        self,
        options: List = [],
        value: Any = None,
        label: Optional[str] = None,
        on_change: Optional[Handler[ValueChangeEventArguments]] = None,
        validation: Optional[Union[ValidationFunction, ValidationDict]] = None,
    ) -> None:
        self.options = options
        super().__init__(
            tag="q-select",
            value=value,
            on_value_change=on_change,
            validation=validation,
        )
        self.set_options(options)
        if label is not None:
            self._props["label"] = label

    def set_options(self, options: List):
        self.options = options
        self._props["options"] = options


class QFilter(QSelect):
    def __init__(
        self,
        options: List = [],
        value: Any = None,
        label: Optional[str] = None,
        on_change: Optional[Handler[ValueChangeEventArguments]] = None,
        validation: Optional[Union[ValidationFunction, ValidationDict]] = None,
        max_items: int = 50,
    ) -> None:
        super().__init__(
            options=None,
            value=value,
            label=label,
            on_change=on_change,
            validation=validation,
        )
        self.all_options = options
        self.max_items = max_items
        self._props["use-input"] = True
        self._props["hide-selected"] = True
        self._props["fill-input"] = True
        self._props["clearable"] = True
        self._props["input-debounce"] = 100
        self.set_limited_options(options)
        self.on("input-value", self.handle_filter)

    def set_limited_options(self, options: List) -> List:
        if len(options) > self.max_items:
            options = options[: self.max_items]
            options.append("...")
        self.set_options(options)

    async def handle_filter(self, e: GenericEventArguments):
        search_value = str(e.args)
        regex_text = re.escape(f"{search_value}*").replace("\*", ".*")
        regex = re.compile(regex_text, re.IGNORECASE)
        options = [o for o in self.all_options if re.match(regex, str(o))]
        self.set_limited_options(options)
        self.update()