Select element behavior with with_input=True

[parlance-zz]

Description

Hello,

The default behavior for the select element clears any user entered text when the element is defocused. The new-value-mode behaviors aren't particularly helpful because they require explicitly using the enter key which isn't necessarily intuitive, and it is unlikely that either the add or add-unique new-value-mode options cover the use cases most developers would want.

In my case I'm using the select element to list saved presets with buttons to load or save them, and it would be ideal if the user could type the preset name into the preset select element and click the save button (or make additional changes / interact with the rest of the UI and then click save). The new / ephemeral value is only removed when selecting a different option in the select element.

My desired behavior is shown here in the "Text autocomplete" example: https://quasar.dev/vue-components/select/#example--text-autocomplete

The following code is a functional workaround, but it's a bit messy and I think my desired functionality is a common enough use case to justify including it in the library.

from nicegui import ui

select_options = ["Google", "Facebook", "Twitter", "Apple", "Oracle"]

with ui.row():
    select_element = ui.select(
        options=select_options,
        label="Type or select an option",
        value="Google",
        with_input=True,
    )

select_val = "Google"
def on_input_value(val):
    print("filter", f"'{val}'")
    global select_val
    select_val = val

def on_blur(e):
    print("blur", "select_val:", select_val, "select_element.value:", select_element.value)  
    if select_val != "" and select_val not in select_options:
        select_element.options = select_options + [select_val]
        select_element.set_value(select_val)

def on_value_change(val):
    print("value_change", val)
    if val in select_options:
        select_element.set_options(select_options)

select_element.on("input-value", lambda e: on_input_value(e.args))
select_element.on("blur", lambda e: on_blur(e))
select_element.on_value_change(lambda e: on_value_change(e.value))

ui.run()

[falkoschindler]

Hi @parlance-zz,

So you're trying to add a new value on blur and not only on enter. This doesn't seem to be Quasar's default behavior. You're referring to the Text autocomplete example. But this doesn't allow to enter new values, which makes it hard to compare. Quasar's New value mode examples behave more like NiceGUI's current implementation.

Since ui.select is already pretty complex, I'm hesitant to add yet another option like "add_new_value_on_blur". I wonder if it should actually be an upstream feature request for Quasar?

[parlance-zz]

Hi @falkoschindler,

Thanks for taking the time to reply. I'm not necessarily interested in having the value directly added to the options on blur, what I want is the ability to disable the behavior of erasing the user input and instantly reverting back to an existing option on blur. Here's a post asking for the same thing in quasar: quasarframework/quasar#12744

I understand the desire to keep default functionality consistent with the behavior of the existing quasar elements they are based on. I'm satisfied with my workaround if you'd prefer not to make any changes.

Thanks again for taking the time to reply and thank you for the excellent work on the library.