Getting input text of ui.select

[adarshpunj]

Description

Is there a direct way to get the input text (whatever the user types) from ui.select? If not, can it be implemented, given that it inherits from ValueElement?

This will be helpful if we want to populate the options from an external source, based on the text entered by the user.

[rodja]

According to https://quasar.dev/vue-components/select/ you should be able to use

ui.select([1, 2, 3], value=1, with_input=True).on('input-value', lambda e: print(e.args)))

But it does not work for some reason. Other events like "blur" work as expected when used with https://nicegui.io/documentation#generic_events

[adarshpunj]

ui.select([1, 2, 3], value=1, with_input=True).on(
        "keydown", lambda e: print(e.args["key"])
    )

@rodja Also working with "keydown", I wonder if we can use this to implement getting input text or is it a bad idea?

cc: @falkoschindler

[falkoschindler]

"keydown" should work as well.

I wonder why "input-value" doesn't work. The client doesn't seem to send the event. 🤔

Here someone recommended to use "filter". This might also be an option.

[falkoschindler]

It looks like we all got confused by NiceGUI expecting camelCase as event type:

ui.select([1, 2, 3], value=1, with_input=True).on('inputValue', lambda e: print(e.args))

Luckily version 1.4.6, which will be released shortly, will also support kebab-case:

ui.select([1, 2, 3], value=1, with_input=True).on('input-value', lambda e: print(e.args))

I'll close this feature request as completed.